自定义Highcharts上下文菜单按钮出现在页面上的每个图表中

Question

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.

Here is a fiddle which demonstrates: http://jsfiddle.net/4uP5y/2/

Thanks!

Answer 1

To add button use options for chart. Then you can set for each chart different set of options: 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)
        }
    }
},

Answer 2

See the updated fiddle with result : http://jsfiddle.net/4uP5y/3/

You just needed to mark the newYork chart with exporting enabled false, like this :

    exporting: {
        enabled: false
    }

Answer 3

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

Answer 4

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.

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:

exporting: appendExportButton("Tokyo Only Option", HelloWorld)

JSFiddle