Анимация div сверху Highcharts очень медленно

Question

Я пишу приложение, которое использует Highcharts, и в одном случае я хочу иметь «слайдер» в нижней части диаграммы, который простирается вертикально по графику. Перемещение ползунка обновит другие части страницы, основываясь на том, где пользователь перемещает ползунок на диаграмме.

Проблема в том, что при рисовании чего-либо сверху Highchart (изображение или div) производительность становится абсолютно неприемлемой. Ползунок просто не может идти в ногу с движениями мыши See a jsfiddle here. Примечание. Это происходит только при работе с большим количеством точек данных (что в моем случае абсолютно неизбежно).

Есть ли что-нибудь, что я могу сделать, если не рисовать сверху диаграммы?

Answer 1

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

Есть решения, но не все из них всегда приемлемы:

• Вы можете попробовать уменьшить количество точек в наборе данных путем отбора проб по более низкой ставке.
• Вы можете попробовать окно, чтобы зритель показывал только диапазон во всем наборе. Например, если у вас есть 10 000 точек данных, ваше окно может скользить по набору данных, показывая только 1500 точек за раз, а не все 10 000 точек.
• Перейдите на другую технологию, такую ​​как Flash или Silverlight.

Как я уже сказал, не все из них или даже любой из них будут работать на вас.

Answer 2

Я заметил, что когда вы перетаскиваете ползунок по графику, он по-прежнему выделяет точки данных. Вероятно, вы должны установить указатели-события: ни на одной части диаграммы при перетаскивании ползунка, что позволит браузерам не проверять указатели-события в этом поддереве (что, если у вас много данных, может быть несколько дорогим, особенно если вы обновлять эти элементы при наведении указателя мыши).