Прочтите Часть 1 перед этой, если вы еще не читали.

В Части 1 мы обсудили рендеринг графиков на стороне сервера и клиента, а также 2 способа визуализации графов на веб-странице: SVG и HTML5 Canvas. Теперь давайте взглянем на некоторые клиентские библиотеки JavaScript, которые мы можем использовать для визуализации различных типов диаграмм в нашем интерфейсе.

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

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

D3.js

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

D3 позволяет нам программно создавать объекты SVG, стилизовать их и добавлять переходы, динамический эффект. Нужно потратить некоторое время на изучение его концепций, прежде чем работать в нем продуктивно. На Udacity есть курс, который обучает D3J.

D3 не использует Canvas для рендеринга элементов. Он строго использует SVG, чтобы дать больший контроль над всем.

D3 широко используется (89к + звезд на Github). На самом деле существует множество библиотек, которые используют D3 для создания на его основе новых библиотек, что делает его более доступным.
Следующие библиотеки построены с использованием D3:

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

ChartJs

ChartJs - популярная библиотека визуализации данных JavaScript. Он использует холст Html5 для визуализации элементов на экране. Графики имеют простой и отзывчивый дизайн с ограниченными возможностями настройки внешнего вида и функций.

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

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

Если вы хотите использовать ChartJs с фреймворком внешнего интерфейса, для упрощения доступны оболочки для ReactJs, VeuJs, Angular и т. Д.

Чартист

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

Вы можете использовать CSS, чтобы стилизовать элементы так, как вы хотите. Вы можете добавить анимацию с помощью CSS. Это делает Chartist более настраиваемым, чем ChartJs.

Начать работу с Chartist намного проще, поскольку он следует принципу «соглашение важнее конфигурации» и предоставляет различные типы диаграмм «из коробки». Он также имеет несколько библиотек-оберток в React / VueJs, чтобы упростить разработку.

HighCharts

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

Он использует SVG и откат к VML для обратной совместимости вплоть до IE6 / IE8.

Он обеспечивает богатую функциональность при минимальной настройке. Часто в результате получаются превосходные, хорошо протестированные визуализации. Графики будут оптимизированы для мобильных устройств, адаптивны, совместимы с браузером, экспортируются и т. Д.

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

AmCharts

AmCharts - коммерческая многофункциональная библиотека JavaScript. Это простая, но мощная и гибкая библиотека. Это также бесплатно для личного использования, но вам нужно будет заплатить за лицензию для коммерческого использования.

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

Начать работу легко, имея хорошую документацию и службу поддержки.

Диаграммы Fusion

Fusion Charts предлагает широкий выбор графиков из коробки. Он имеет более 95+ типов графиков, с которыми можно работать. Вам нужно будет купить лицензию, чтобы использовать их библиотеку.

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

В отличие от большинства других библиотек, он также предлагает официальную поддержку рендеринга графиков на стороне сервера с помощью FusionExport SDK!

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

Google диаграммы

Google Charts мощные, бесплатные и простые в использовании. Разработчики могут создавать самые простые диаграммы с помощью Google Charts. Он использует SVG для визуализации диаграмм в браузере.

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

Сам Google использует эту библиотеку для визуализации данных в разных продуктах.

Спасибо за чтение! Дайте знать, понравилась ли вам статья в комментариях!

Найдите меня на https://virajc.tech

Первоначально опубликовано по адресу: https://virajc.tech/blog/world-of-charts-2/