Question

我有一个包含多个图表的页面，我需要能够为每个图表的导出上下文菜单添加特定选项。这是我正在使用的代码：

myChart.options.exporting.buttons.contextButton.menuItems.push({
        text: "Custom Option",
        onclick: someFunction
    });

不幸的是，这会为每个图表添加选项，而不仅仅是myChart引用的图表。我希望能够添加一个选项并将其显示在一个图表上。

这是一个小提琴演示：http://jsfiddle.net/4uP5y/2/

谢谢！

Answer 1

为图表添加按钮使用选项。然后，您可以为每个图表设置不同的选项集：http://jsfiddle.net/4uP5y/4/

获取默认按钮：

var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;

buttons.push({
    text: "Tokyo Only Option",
    onclick: HelloWorld
});

并将它们设置为图表：

exporting: {
    buttons: {
        contextButton: {
            menuItems: buttons // or buttons.slice(0,6)
        }
    }
},

Answer 2

请参阅更新后的结果：http://jsfiddle.net/4uP5y/3/

您只需要在导出已启用false的情况下标记newYork图表，如下所示：

    exporting: {
        enabled: false
    }

Answer 3

我发现另一种可能性只能将其添加到一个图表中。将以下内容添加到要扩展上下文菜单的图表

       exporting: {
            buttons: {
                contextButton: {
                    menuItems: [

                    ]
                }
            }
        },

。现在，您可以使用类似

的方法动态扩展图表

 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);
};

。 this.chart指向图表应该扩展上下文菜单

Answer 4

从Paweł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};
}

要在所需图表中插入此按钮，请按以下方式定义图表：

var mychart = new Highcharts.Chart({
  chart: {
    ...whatever...
  },
  plotOptions: {
    ...whatever...
  },
  series: {
    ...whatever...
  },
  exporting: appendExportButton("Save data in CSV format", saveCSV)
});

在OP问题的情况下，这是您必须使用的行：

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

JSFiddle

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

4 个答案: