如何从Highcharts中移除按钮

Question

我正在使用Highcharts库创建图表，想知道如何删除右上角的两个小按钮，其中一个可以打印和下载图表，我想添加一个新按钮。也许有人可以帮我吗？

- tomzi

---

通过Firebug检查它们是否有标识或其他属性，使用CSS选择器并调用.remove()方法将它们删除。 - mas-designs

使用Firebug找到那些特定的按钮ID，在您的CSS中，您可以指定对于该特定ID或类别进行display:none。 - manny

Answer 1

尝试在生成图表时添加exporting: { enabled: false }。

- dgw

---

非常感谢，它有效了 :D。也许你知道如何添加一个新的吗？ - tomzi

不，不是真的要创建一个新的按钮。但也许你可以修改其中一个打印/导出按钮。文档中有相关提示：http://www.highcharts.com/ref/#exporting-buttons ... 尝试使用 onClick 属性进行调整。 - dgw

“exporting: false”足够了。 - Adi Azarya

Answer 2

点击这个链接可以创建一个新的按钮：

示例: 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 - http://www.highcharts.com/js/testing-exporting.js" - gps

Answer 3

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

您需要禁用的只有上下文按钮。

- Ivan Ruski

Answer 4

最好的方法是禁用导航按钮选项，然后按照文档中所述逐个自定义菜单和上下文，从而替换汉堡图标。从这里开始，您可以使用任何想要的图标与自己的下拉菜单。

这将禁用汉堡图标。

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'
 });
});

{{链接1：jsfiddle}}

- Christopher R.

---

谢谢伙计，这个帮了我6年之久，成功隐藏汉堡图标而不禁用导出功能 ;) - b1919676

请注意，此修复还会删除更改 x 轴标签选择（如果有）。 - danday74

谢谢，非常有帮助。在这个例子中缺少了"viewfullscrean"，所以对于需要的人，请参考https://jsfiddle.net/BlackLabel/1ga2fqL0/ - Paulo Victor

很高兴能够帮助！ - Christopher R.

Answer 5

exporting:false,

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

- Sasikumar

Answer 6

@dgw的想法是正确的，可以删除导出按钮，但我对“我想添加一个新按钮”的建议并不满意，直到我意识到我应该将按钮放在图形外面。除非您的数据是静态的，否则您真的不知道是否有足够的空间来显示控件。

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

- Dan Ross

Answer 7

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

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

- Renat Gatin

Answer 8

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

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

Highcharts 示例

- Debra Saunders