9 библиотек Javascript для создания интерактивных диаграмм

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

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

Читайте также: 20 анимированных и интерактивных инфографиок, которые вы должны увидеть

1. Диаграмма JS
   Chart.js – это библиотека без зависимостей для построения диаграмм в 6 различных типах: линейные диаграммы, гистограммы, радарные диаграммы, диаграммы полярных областей, круговые и кольцевые диаграммы. Библиотека также разбита в соответствии с типом диаграммы, поэтому ваши страницы не увязают в том, что не нужно. Он поддерживает адаптивный дизайн, и вы можете легко изменять переменные, такие как цвет или анимация, чтобы настроить интерфейс диаграммы.
   2. Чартист Дж.С.
   Chartist JS – отличная библиотека для создания адаптивных диаграмм, использующих SVG. Помимо своей отзывчивости, Chartist дает вам гибкость благодаря четкому разделению задач: стиль с помощью CSS и контроль с помощью JS. Чтобы упростить настройку, включены файлы SASS. Самое замечательное в том, что у вас есть неограниченные возможности для анимации вашего графика с помощью API чартистской анимации, СМИЛ, который дает вам дополнительные параметры анимации.
   3. C3 JS
   C3 JS – это библиотека для построения графиков на основе D3 JS, Он оборачивает необходимый код для построения диаграмм с помощью D3 JS, поэтому вы можете пропустить написание кода D3 и просто ввести свои данные. C3 поставляется с множеством API, которые вы можете использовать для удобного управления графиками. Чтобы настроить диаграмму, определите свои собственные стили для данных классов CSS. Построить графики из простых линейных графиков, чтобы измерить графики. Проверьте это страница чтобы увидеть, как работает библиотека.
   4. Flot
   Flot – это плагин jQuery для создания диаграмм с интерактивными элементами, такими как включение или выключение серии, взаимодействие точек данных, панорамирование, масштабирование и многое другое. Flot поставляется с множеством опций типа диаграммы, и если вы хотите больше возможностей на диаграмме, вот некоторые плагины Вы также можете использовать. Графики будут хорошо работать с браузерами, которые поддерживают HTML-холсты.
   5. EChart
   Echart – удивительно всеобъемлющая библиотека из Китая, которая поддерживает несколько типов диаграмм, может обрабатывать большие данные (отображая до 200 000 точек данных на декартовой диаграмме), имеет масштабный роуминг, возможность извлекать, интегрировать и обмениваться данными между несколькими диаграммами без усилий, позволяя легко переключаться с одного типа данных на другой, и целый ряд Больше,
   6. Peity
   Пейти добавит мини-диаграмму на вашу веб-страницу. Это небольшой плагин jQuery, который превращает элемент в линию, столбец, пончик или круговую диаграмму mini svg. Вам просто нужно создать элемент и присвоить ему значение, равное 1/5, и создать для этого элемента peity (‘pie’) для создания мини-круговой диаграммы. Например, чтобы создать кольцевую диаграмму, которая будет выделена только на одну пятую, вот HTML:

1/5

Вы можете настроить цвет диаграммы, радиус, ширину и высоту, но по умолчанию она отображается в небольшом размере.
7. DC JS
DC JS имеет сходство с C3 JS с точки зрения используемого двигателя; они оба используют библиотеку D3 для визуализации диаграмм в SVG. DC JS создан, чтобы помочь вам визуализировать данные и анализ для браузеров и для мобильных устройств. Поскольку он использует D3 JS, он позволяет добавлять взаимодействие с пользователем на график. DC JS – это мощная библиотека для создания диаграмм от простых до сложных задач.
8. Google Chart
Вы можете создавать интерактивные диаграммы и инструменты данных, используя API визуализации Google через Google Chart. Есть диаграммы галерей проверить возможности визуализации данных Google Chart. Для начала вставьте простой JavaScript на свою веб-страницу, чтобы загрузить нужные библиотеки Google Chart. Затем перечислите данные, которые вы хотите наметить, и внесите некоторые изменения в параметры диаграммы. Наконец, создайте объект диаграммы с идентификатором, и на своей веб-странице создайте

<

div> с этим идентификатором для отображения вашего графика.
9. NVD3
NVD3 – это набор многоразовых диаграмм и компонентов диаграмм, созданных с помощью D3 JS. Следовательно, эта библиотека является «шаблоном», который поможет вам легче строить диаграммы. Проверьте много типовые диаграммы построен с NVD3 Вот,
Теперь прочитайте: библиотеки JavaScript для создания интерактивных и настраиваемых карт