如何从 Highcharts 中删除按钮

Posted 2023-02-16

【中文标题】如何从 Highcharts 中删除按钮

【英文标题】：How to remove button from Highcharts

【发布时间】：2012-03-29 22:49:41

【问题描述】：

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

也许有人可以帮助我？

【问题讨论】：

通过萤火虫检查他们，如果他们有身份或其他东西。使用 css 选择器并在它们上调用 .remove() 方法。

使用 firebug 并找到那些特定的按钮 id，在你的 css 中你可以说 display:none 用于那个特定的 id 或类

【参考方案1】：

尝试将exporting: enabled: false 添加到您的图表生成中。

【讨论】：

非常感谢，它有效：D。也许你知道我怎样才能添加一个新的？

不，不是真的创建一个新的。但也许您可以修改其中一个打印/导出按钮。文档提示这个方向highcharts.com/ref/#exporting-buttons ...玩onClick。

exporting: false 就够了

【参考方案2】：

选中此项以创建新按钮：

示例：http://jsfiddle.net/fXHB5/3496/

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

【讨论】：

这个 jsfiddle 不再工作了。 "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js"

【参考方案3】：

替换汉堡图标的最佳方法是禁用导航按钮选项，然后创建自己的菜单并按照documentation 中的说明一一自定义上下文。从这里您可以使用您自己的下拉菜单中的任何图标。

这会禁用汉堡图标。

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

【讨论】：

感谢哥们，这有助于在 6 年后隐藏汉堡图标而不禁用导出；）

请注意，此修复还删除了 x 轴标签的更改选择（如果有）

Obrigado，阿朱杜巴斯坦特。 nesse exemplo ta foltando o "viewfullscrean" então pra quem estiver precisando jsfiddle.net/BlackLabel/1ga2fqL0

feliz por poder ajudar！

【参考方案4】：

exporting: 
    buttons: 
        contextButton: 
            enabled: false
        
    

您必须只禁用 contextButton。

【参考方案5】：

exporting:false,

添加上述代码以禁用导出选项。

【参考方案6】：

@dgw 有删除导出按钮的正确想法，但我对“我想添加一个新的”建议并不满意，直到我意识到我应该只制作按钮 outside the graph。除非您的数据是静态的，否则您真的不知道是否有空间来显示您的控件。

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

【参考方案7】：

其他选项是： 如果您根本不需要它，您可以从整个项目中删除“node_modules/highcharts/modules/exporting.js”的导入。

这对我来说是一个解决方案！

【参考方案8】：

最好的方法是更新exporting.buttons.contextButton.menuItems 数组以仅包含您想要的菜单项。以下是排除“打印图表”和“查看全屏”选项的示例。

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

Highcharts Example