javascript - 如何在 Highcharts 导出菜单中显示分隔线？

Question

Highcharts导出工具的“打印图表”入口下方有一条直线。我想生成其中的一两个，以便将图像与数据格式分开，以及在添加其他链接之前。

如何生成线条？我用 DIV 尝试过，但这似乎不是解决方案(太多的调整和欺骗)，也不是 <hr> .那么最好的选择是什么？

感谢任何提示!

Answer 1

使用 Highcharts API，在定义菜单时，您只需将以下代码添加为 exporting.buttons.contextButton.menuItems 数组中的一个元素:

{ separator: true }

以下代码将直接添加到您的图表选项中，并显示如何分隔每个项目 (see it on JSFiddle):

exporting: {
    buttons: {
        contextButton: {
            menuItems: [{
                textKey: 'printChart',
                onclick: function () {
                    this.print();
                }
            }, {
                separator: true
            }, {
                textKey: 'downloadPNG',
                onclick: function () {
                    this.exportChart();
                }
            }, {
                separator: true
            }, {
                textKey: 'downloadJPEG',
                onclick: function () {
                    this.exportChart({
                        type: 'image/jpeg'
                    });
                }
            }, {
                separator: true
            }, {
                textKey: 'downloadPDF',
                onclick: function () {
                    this.exportChart({
                        type: 'application/pdf'
                    });
                }
            }, {
                separator: true
            }, {
                textKey: 'downloadSVG',
                onclick: function () {
                    this.exportChart({
                        type: 'image/svg+xml'
                    });
                }
            }]
        }
    }
}