Custom Highcharts Context Menu Button Appearing in Every Chart on Page

前端 未结 4 1518
执笔经年
执笔经年 2021-01-12 10:37

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:

         


        
4条回答
  •  Happy的楠姐
    2021-01-12 11:06

    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

提交回复
热议问题