วิธีลบปุ่มออกจาก Highcharts

86

ฉันกำลังสร้างแผนภูมิด้วยไลบรารี Highcharts และฉันสงสัยว่าจะลบปุ่มเล็ก ๆ 2 ปุ่มที่มุมขวาซึ่งคุณสามารถพิมพ์และดาวน์โหลดกราฟได้อย่างไรและฉันต้องการเพิ่มใหม่

อาจมีคนช่วยฉันได้

javascript highcharts

— ทอมซี
แหล่งที่มา

1

ตรวจสอบพวกเขาผ่าน firebug หากพวกเขามีตัวตนหรือสิ่งอื่น ๆ ใช้ css selectors และเรียกใช้เมธอด. remove ()

— mas-designs

ใช้ firebug และค้นหารหัสปุ่มเฉพาะเหล่านั้นและใน css ของคุณคุณสามารถพูดให้แสดง: ไม่มีสำหรับ id หรือคลาสนั้น ๆ

— manny

215

ลองเพิ่มexporting: { enabled: false }ในการสร้างแผนภูมิของคุณ

— dgw
แหล่งที่มา

ขอบคุณมากมันใช้งานได้: D. คุณอาจจะรู้ว่าฉันจะเพิ่มใหม่ได้อย่างไร?

— tomzi

ไม่ใช่ไม่ได้สร้างใหม่จริงๆ แต่บางทีคุณสามารถปรับเปลี่ยนปุ่มพิมพ์ / ส่งออกปุ่มใดปุ่มหนึ่ง เอกสารประกอบคำแนะนำในทิศทางนี้highcharts.com/ref/#exporting-buttons ... เล่นกับไฟล์onClick.

— dgw

3

exporting: falseก็เพียงพอแล้ว

— Adi Azarya

13

ตรวจสอบสิ่งนี้เพื่อสร้างปุ่มใหม่:

ตัวอย่าง: http://jsfiddle.net/fXHB5/3496/

exporting: {
    buttons: [
        {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function() {
                alert('click!')
            }
        }
    ]
}

— Andre Sampaio
แหล่งที่มา

jsfiddle นี้ใช้ไม่ได้อีกต่อไป "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js "

— gps

9

วิธีที่ดีที่สุดที่จะเปลี่ยนไอคอนแฮมเบอร์เกอร์คือการปิด buttonOptions นำทางแล้วสร้างเมนูของคุณเองและปรับแต่งบริบทหนึ่งโดยหนึ่งตามที่ระบุไว้ใน เอกสาร จากที่นี่คุณสามารถใช้ไอคอนใดก็ได้ที่คุณต้องการด้วยเมนูแบบเลื่อนลงของคุณเอง

เพื่อปิดไอคอนแฮมเบอร์เกอร์

navigation: {
buttonOptions: {
  enabled: false
  }
 }

นี่คือวิธีปรับแต่งตัวเลือกการส่งออกสำหรับรายการของคุณเอง

$('#print').click(function() {
chart.print();
});
$('#pdf').click(function() {
chart.exportChart({
  type: 'application/pdf',
  filename: 'my-pdf'
 });
});
$('#png').click(function() {
chart.exportChart({
  type: 'image/png',
  filename: 'my-png'
 });
});
$('#jpeg').click(function() {
chart.exportChart({
  type: 'image/jpeg',
  filename: 'my-jpeg'
 });
});
$('#svg').click(function() {
chart.exportChart({
  type: 'image/svg+xml',
  filename: 'my-svg'
 });
});

jsfiddle

— คริสโตเฟอร์อาร์.
แหล่งที่มา

2

ขอบคุณเพื่อนสิ่งนี้ช่วยได้หลังจาก 6 ปีในการซ่อนไอคอนแฮมเบอร์เกอร์โดยไม่ต้องปิดการส่งออก)

— b1919676

โปรดทราบว่าการแก้ไขนี้จะลบการเลือกการเปลี่ยนแปลงสำหรับป้ายแกน x ด้วย (ถ้ามี)

— danday74

Obrigado, ajudou bastante nesse exemplo ta foltando o "viewfullscrean" então pra quem estiver precisando jsfiddle.net/BlackLabel/1ga2fqL0

— Paulo Victor

feliz โดย poder ajudar!

— Christopher R

7

exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }
    }
}

คุณต้องปิดใช้งานเฉพาะ contextButton

— อีวานรุสกี้
แหล่งที่มา

1

exporting:false,

เพิ่มรหัสด้านบนเพื่อปิดใช้งานตัวเลือกการส่งออก

— ศศิกุมาร
แหล่งที่มา

0

@dgw มีความคิดที่ถูกที่จะเอาปุ่มส่งออก แต่ผมก็ไม่ได้มีความสุขกับ "และฉันต้องการที่จะเพิ่มใหม่" ข้อเสนอแนะจนกว่าฉันรู้ฉันก็ควรจะทำให้ปุ่มนอกกราฟ เว้นแต่ข้อมูลของคุณจะเป็นแบบคงที่คุณจะไม่รู้จริงๆว่ามีพื้นที่ให้แสดงการควบคุมของคุณหรือไม่

<div id="container" style="height: 400px; min-width: 600px"></div>
<button id="button" class="autocompare">new button</button>

— แดนรอส
แหล่งที่มา

0

ตัวเลือกอื่น ๆ คือคุณสามารถลบการนำเข้า "node_modules / highcharts / modules / exporting.js" ออกจากโปรเจ็กต์ทั้งหมดได้หากคุณไม่ต้องการเลย

นั่นเป็นทางออกสำหรับฉัน!

— รีแนทกาติน
แหล่งที่มา

0

วิธีที่ดีที่สุดคืออัปเดตexporting.buttons.contextButton.menuItemsอาร์เรย์ให้รวมเฉพาะรายการเมนูที่คุณต้องการ ด้านล่างนี้คือตัวอย่างที่ไม่รวมตัวเลือก "Print Chart" และ "View Full Screen"

exporting: {
    buttons: {
        contextButton: {
            menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
        }
    }
}

ตัวอย่าง Highcharts

— Debra Saunders
แหล่งที่มา