如何从Highcharts中删除按钮


85

我正在使用Highcharts库创建图表,我想知道如何删除右上角的2个小按钮,您可以打印和下载图形,而我想添加一个新按钮。

也许有人可以帮助我?


1
如果他们有身份或其他东西,请通过萤火虫对其进行检查。使用CSS选择器并在其上调用.remove()方法。
mas-designs

使用萤火虫并找到那些特定的按钮ID,在CSS中您可以说显示:该特定ID或类
均无

Answers:




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 '18

Obrigado,Ajudou Bastante。nesse exemplo ta foltando o“ viewfullscrean”entãopra quem
Paulo Victor

feliz por poder ajudar!
Christopher R.



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阵列更新为仅包含所需的菜单项。下面是一个示例,其中不包括“打印图表”和“查看全屏”选项。

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

高图示例

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.