Question

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

也许有人可以帮助我？

Answer 1

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

Answer 2

选中此项以创建新按钮：

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

Answer 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

Answer 4

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

您必须仅禁用contextButton。

Answer 5

exporting:false,

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

Answer 6

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

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

Answer 7

其他选项是：您只需从整个项目中删除“ node_modules / highcharts / modules / exporting.js”的导入即可。

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

Answer 8

执行此操作的最佳方法是将exporting.buttons.contextButton.menuItems数组更新为仅包含所需的菜单项。下面是一个示例，其中不包括“打印图表”和“查看全屏”选项。

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

Highcharts Example

如何从HighCharts中删除按钮

8 个答案: