Задать вопрос
@mortyy

Как оптимизировать отрисовку графика на canvas?

Добрый день.
Вопрос 1)
График (line chart) строится на основе массива в котором ~30000 элементов.(Ось X - даты, Y - значения )
В начале я прохожусь циклом, чтобы найти максимальное значение по оси Y, затем циклом для отрисовки осей и значений на них, а затем еще одним циклом для того, чтобы нарисовать сам график.
Как можно оптимизировать эти 3 цикла, чтобы страница не подвисала на несколько секунд, как это происходит сейчас ?

Вопрос 2)
В данных на основании которых строится график, значения, используемые для оси Y могут повторятся. Т.к массив данных большой, я хочу отображать на оси Y, например не больше 20 значений. Как правильно выбрать уникальные значения, для отображение по Y ?
  • Вопрос задан
  • 630 просмотров
Подписаться 1 Сложный 2 комментария
Решения вопроса 1
twobomb
@twobomb
Может я чето не правильно понял, но вот мой вариант решения. Тоесть мы можем просматривать график, рисуем только его часть. Для теста также забил массив на 30к элементов, ничего не лагает все норм пробовал даже лям, впринципе любое значение будет норм так как он работает только с несколькими без перебора всего массива.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
А почему канвас? На svg как правило все намного проще, особенно если нужна какая-то интерактивность. Если хочется уже готовое - смотреть в сторону того, что посоветовал JRK_DV, если хочется писать свое - то d3.js
Ответ написан
Комментировать
@forspamonly2
графики с большим количеством данных вообще трудно делать, при каком-то размере датасета любой подход перестаёт работать.

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

Войдите, чтобы написать ответ

Похожие вопросы