Пользовательская кнопка контекстного меню Highcharts, появляющаяся на каждом графике на странице

У меня есть страница с несколькими диаграммами, и мне нужно добавить определенные параметры в контекстное меню экспорта для каждой диаграммы. Это код, который я использую:

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

к сожалению, это добавляет опцию к каждой диаграмме, а не только ссылки на диаграмму myChart. Я хотел бы иметь возможность добавить опцию и отобразить ее только на одном графике.

вот скрипка, которая демонстрирует:http://jsfiddle.net/4uP5y/2/

спасибо!

6
highcharts javascript

4 ответов

для добавления кнопки используйте параметры диаграммы. Затем вы можете установить для каждого графика другой набор опций: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)
        }
    }
},
11

см. обновленную скрипку с результатом:http://jsfiddle.net/4uP5y/3/

вам просто нужно было отметить диаграмму newYork с включенным экспортом false, например:

    exporting: {
        enabled: false
    }
2

Я нашел еще одну возможность, чтобы добавить его только на один график. Добавьте следующее на диаграмму, где вы хотите расширить контекстное меню

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

. Где это.диаграмма указывает на диаграмму, контекстное меню которой должно быть расширено

0

начиная с ответа 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

0