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

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

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

В этой истории мы увидим, для каких приложений подходит визуализация данных на стороне сервера, и я поделюсь своим опытом создания доказательства концепции визуализации данных на стороне сервера с помощью LightningChart JS.

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

«Визуализация данных на стороне сервера» - это метод, при котором визуализация диаграммы перемещается на сервер, а результат загружается и отображается на веб-странице в виде изображения. Вот некоторые общие преимущества:

+ Отсутствие сложных алгоритмов рисования диаграмм за счет пользователей. Графики для рисования могут быть тяжелыми, что может испортить взаимодействие с пользователем, особенно с недорогими устройствами, такими как ноутбуки и телефоны.

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

+ Больше вычислительной мощности. Время работы браузера JavaScript - это довольно ограниченная песочница, особенно когда речь идет о доступной памяти и вычислительной мощности. Выполняя визуализацию данных в сценарии Node.js, например, вы получаете лучший доступ к многопоточности и управлению памятью во время выполнения, что может обеспечить тяжелые визуализации, которые были бы невозможны или непрактичны на стороне клиента.

Естественно, визуализация данных на стороне сервера тоже имеет свои недостатки:

  • В противном случае изначально доступные пользовательские взаимодействия с библиотекой диаграмм невозможно использовать, поскольку у клиента есть только изображение диаграммы. Если приложение требует подробных взаимодействий с диаграммами, лучше всего придерживаться визуализации данных на стороне клиента.
  • Частота обновления диаграммы ограничена скоростью загрузки; Графические изображения высокого разрешения представляют собой файлы удивительно большого размера, поэтому постоянно загружать обновленное изображение не очень реалистично. Если приложению требуется частота обновления более 1 FPS (кадров в секунду), лучше всего рисовать диаграммы на стороне клиента.

Ранее я упоминал, что большинство библиотек диаграмм JS не слишком упрощают использование рендеринга на стороне сервера. Обычно пользователь сам настраивает среду браузера без заголовка и каким-то образом заставляет ее работать с библиотекой диаграмм.

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

Мы управляем нашим собственным официальным пакетом поддержки для запуска LightningChart JS в среде без заголовка (lcjs-headless), и его использование точно такое же, как в приложении браузера - только без браузера :)

Я написал тестовое приложение Node.js, которое генерирует данные, помещает их в серию сеток тепловой карты LCJS и отображает диаграмму в файл PNG.

Это идеально подходит для визуализации действительно подробных тепловых карт с большими наборами данных - например, на картинке выше тепловая карта содержит более 6 миллионов точек данных. Чтобы сделать это на старом мобильном телефоне, может потребоваться вызов пожарной охраны.

Пакет без головы LCJS позволяет легко экспортировать визуализированную диаграмму в различные форматы, такие как PNG или двоичные капли, для отправки через Интернет. Кроме того, размер диаграммы может быть установлен произвольно, что позволяет отображать изображения с действительно высоким разрешением, что может быть замечательно, если вам нужно масштабирование на стороне клиента, или изображения меньшего размера, если размер является проблемой.

Для желающих вы можете найти код здесь.

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

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