javascript 出现在页面上每个图表中的自定义 Highcharts 上下文菜单按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23944451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Highcharts Context Menu Button Appearing in Every Chart on Page
提问by user3689417
I have a page with several charts, and I need to be able to add specific options to the exporting context menu for each chart. This is the code I am using:
我有一个包含多个图表的页面，我需要能够为每个图表的导出上下文菜单添加特定选项。这是我正在使用的代码：
myChart.options.exporting.buttons.contextButton.menuItems.push({
text: "Custom Option",
onclick: someFunction
});
Unfortunately, this adds the option to every chart, not just the chart myChart references. I'd like to be able to add an option and have it appear on only one chart.
不幸的是，这将选项添加到每个图表，而不仅仅是图表 myChart 引用。我希望能够添加一个选项并让它只出现在一张图表上。
Here is a fiddle which demonstrates: http://jsfiddle.net/4uP5y/2/
这是一个演示的小提琴：http: //jsfiddle.net/4uP5y/2/
Thanks!
谢谢！
回答by Pawe? Fus
To add button use options for chart. Then you can set for each chart different set of options: http://jsfiddle.net/4uP5y/4/
要为图表添加按钮使用选项。然后你可以为每个图表设置不同的选项集：http: //jsfiddle.net/4uP5y/4/
Get default buttons:
获取默认按钮：
var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
buttons.push({
text: "Tokyo Only Option",
onclick: HelloWorld
});
And set them for a chart:
并将它们设置为图表：
exporting: {
buttons: {
contextButton: {
menuItems: buttons // or buttons.slice(0,6)
}
}
},
回答by Ash
See the updated fiddle with result : http://jsfiddle.net/4uP5y/3/
查看更新的小提琴结果：http: //jsfiddle.net/4uP5y/3/
You just needed to mark the newYork chart with exporting enabled false, like this :
您只需要使用导出启用 false 标记 newYork 图表，如下所示：
exporting: {
enabled: false
}
回答by bbbastibb
I found another possiblity to add it only to one chart. Add following to the chart where you want to extend the context menu
我发现另一种可能将它仅添加到一个图表中。将以下内容添加到要扩展上下文菜单的图表中
exporting: {
buttons: {
contextButton: {
menuItems: [
]
}
}
},
. Now you are able to extend the chart dynamicly with a method like
. 现在您可以使用类似的方法动态扩展图表
function (button) {
var userMenu = this.chart.userOptions.exporting.buttons.contextButton.menuItems;
if (userMenu.length === 0) {
var menuItems = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
for (var itemIndex in menuItems) {
userMenu.push(menuItems[itemIndex]);
}
}
userMenu.push(button);
};
. Where this.chart points to the chart which context menu should be extended
. this.chart 指向应该扩展哪个上下文菜单的图表
回答by Kar.ma
Starting from Pawe? Fus answer, I found out a cleaner solution for the general case. The main issue is you need not to mess around with original object and extend it. Instead, you'd be better cloning it. Please note that my solution requires jQuery.
从帕维开始？Fus 回答，我为一般情况找到了一个更清洁的解决方案。主要问题是您不需要弄乱原始对象并扩展它。相反，你最好克隆它。请注意，我的解决方案需要 jQuery。
function appendExportButton(mytext, myfunction){
var defaultButtons = Highcharts.getOptions().exporting.buttons; // get default Highchart Export buttons
var myButtons = $.extend(true, {}, defaultButtons);
myButtons.contextButton.menuItems.push({
text: mytext,
onclick: myfunction
});
return {buttons: myButtons};
}
To insert this button in the desired chart, define the chart this way:
要在所需图表中插入此按钮，请按以下方式定义图表：
var mychart = new Highcharts.Chart({
chart: {
...whatever...
},
plotOptions: {
...whatever...
},
series: {
...whatever...
},
exporting: appendExportButton("Save data in CSV format", saveCSV)
});
In the case of OP problem, this is the line you have to use:
在 OP 问题的情况下，这是您必须使用的行：
exporting: appendExportButton("Tokyo Only Option", HelloWorld)
