Как я могу оптимизировать зоны Highcharts.js?

Question

Я использую Highcharts.js с реакцией (использую chrome для тестирования), и она отлично работает с одноцветными графиками. Однако мне нужно раскрасить граф области или несколько линейных графиков в соответствии со значением point.y и условием, и это вызывает проблемы с производительностью.

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

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

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

Я пытался использовать turboThreshold, и это не помогло. Зоны не реализованы в буст-модуле. Есть ли способ повысить производительность с тысячами точек и сотнями зон?

Answer 1

Я думаю, что в вашем случае хорошим решением было бы использовать плагин Multicolor series вместо зон: http://blacklabel.github.io/multicolor_series/