Как отрисовать 1000 графиков на Chart.js?

Question

[Александр Панков]

Здравствуйте, у меня приложение на nuxt 3.
с бека я получаю большую таблицу примерно на 1000 строк.

Встала задача выводит в строках таблице небольшой график, я подключил для это https://vue-chartjs.org/
На страте подозревал, что вряд ли это выйдет и так и вышло, на странице я могу вывести примерно 200 графиков, если больше, то "хром не отвечает, закрыть"..
Как можно побороть проблему, оптимизировать может быть что-то?

строка таблицы выглядит так (+ еще не допили график, тк его столбики будут разноцветные в соответствие с легендой)


ps: может есть какой-то более легковесный плагин, или перерисовывать их толлько для срок что сейчас видны (кажетя костыльным)?

Comments

[Aetae]

Чтоб нарисовать пять квадратиков тебе не нужен никакой тяжеловесный плагин, достаточно щепотки css да ложки школьной математики.:)

Ну а так вам верно сказали, что если куча строк - в любом случае нужен virtual scroll.

Answer 1

[Алексей Уколов]

Как можно побороть проблему, оптимизировать может быть что-то?

Открыть DevTools на вкладке Performance и затрейсить рендеринг. Смотреть в получившиеся графики, искать, куда уходит время и ресурсы.
Но вообще, эту задачу скорее надо решать через UX - вряд ли кому-то вообще нужны разом эти 1000 графиков.

Answer 2

[Антон Антон]

Выкинуть все анимации, нарисовать все графики на канвасе который не видно один раз и сохранить в dataurl или objecturl png (можно с помощью chartjs) и выводить картинками, убрать у них реактивность (это уже опционально)

добавить virtualscroll для таблицы