Highcharts / jQuery-уничтожить и перестроить диаграмму с оригинальными опциями

на основе информации в этой теме:реализовать собственное состояние-INACTIVE_STATE?

Я построил диаграмму, которая соответствует моим потребностям - jsfiddle

я добавил некоторые пользовательские элементы управления, чтобы позволить пользователю показывать / скрывать все серии и проверять/снимать все серии.

все работает нормально.

последняя часть, которую я хочу сделать, это позволить пользователю сбросить диаграмму с исходными параметрами.

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

Итак, мой вопрос(ы) -

  1. это правильный способ уничтожить и перестроить диаграмму, или есть лучший метод?
  2. если это способ сделать это, то как мне получить мои функции show / hide / check / uncheck для продолжения работы потом?

код для сброса диаграммы находится здесь:

//reset the chart to original specs
$('#resetChart').click(function(){
    chart1.destroy();
    chart1 = new Highcharts.Chart(optionsChart1,highlightSer);
});

highlightSer - функция обратного вызова для выделения определенных рядов.

пример кода, который больше не работает после этого:

var chart = chart1;
$('#showAll').click(function(){
        for(i=0; i < chart.series.length; i++) {
        chart.series[i].show();
    }
});

спасибо!

2 ответов


1) это правильный способ уничтожить и перестроить диаграмму, или есть лучший метод?

Это единственный способ, и Highcharts достаточно умен, так что вам не придется беспокоиться о каких-либо утечек памяти.

2) если это способ сделать это, то как я могу заставить мои функции show/hide/check/uncheck продолжать работать после этого?

вы воссоздаете диаграмму, но не назначаете ее переменной chart снова.

$('#resetChart').click(function(){
    chart1.destroy();
    chart1 = new Highcharts.Chart(optionsChart1,highlightSer);
    chart = chart1; // <-------- Add this line here.
});

есть ли причина для назначения диаграммы новой переменной здесь?

var chart = chart1;

chart больше не будет указывать на график после его уничтожения. Если вы просто используете chart1, который вы повторно назначить, все кажется, работает просто отлично. Или я что-то упускаю?