Лучшая производительность для обновления многих экземпляров Highcharts по запросу

Question

В настоящее время у меня есть страница с графикой Highcharts около 22, и они могут быть выбраны пользователем пользователем. Каждое взаимодействие фильтра удаляет текущую серию и добавляет новые.

Я начал с двумя подходами, первым состоял в том, чтобы цикл, который прошел через все сохраненные объекты, например, удаление каждую Серии,

while currentChart.series.length > 0 
    currentChart.series[currentChart.series.length - 1].remove() 

, а затем, после того, как другой цикл, который проходит через массивы для поиска данные фильтра и

currentChart.addSeries 
    name: operatorName 
    data: data 
    type: options.chartType 

но эта реализация оказалась довольно тяжелой.

Затем я осуществил таймаут, чтобы позволить плагину немного дышать и не складывать столько, установив тайм-аут 1 мс между каждым циклом, я получил лучшую производительность и мог видеть анимацию, но это делает его немного вялым. Установка более высокого тайм-аута делает страницу трудной для навигации, и фильтрация изменений будет стека, так как для всего графического обновления потребуется много времени.

Answer 1

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

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

chart: { 
     animation: false 
    }, 
    plotOptions: { 
     series: { 
      animation: false 
     } 
    }, 

Answer 2

while currentChart.series.length > 0 
    currentChart.series[0].destroy() 

например: http://jsfiddle.net/5B9c7/1/