9 библиотек Javascript для создания интерактивных диаграмм
Таким образом, у вас в руках тонны данных с множеством переменных, которые вы должны каким-то образом передать кому-то еще. Сырые, неорганизованные данные будут трудны для понимания. Вот почему вам нужна помощь из графиков. В веб-дизайне, диаграммы являются одним из лучших инструментов для визуализации данных. Это легко читать, легко для глаз и относительно легко настроить.
Но давайте поднимемся на ступеньку выше: давайте добавить анимацию и интерактивность в эти графики, так что читатели могут не только узнать что-то новое из таблицы, но и поиграть с ней. Это на самом деле проще, чем кажется, благодаря множеству библиотек JS. Давайте проверим их.
1. Диаграмма JS
Chart.js является библиотекой без зависимостей для построения диаграмм в 6 различных типах: линейные диаграммы, гистограммы, радиолокационные диаграммы, диаграммы полярной области, круговые и кольцевые диаграммы. Библиотека также разделена в соответствии с типом диаграммы, поэтому ваши страницы не увязнут в том, что не нужно. Он поддерживает адаптивный дизайн, и вы можете легко изменять переменные, такие как цвет или анимация, чтобы настроить интерфейс диаграммы.
2. Чартист Дж.С.
Чартист Дж.С. отличная библиотека для создания адаптивных графиков, использующих SVG. Помимо своей отзывчивости, Chartist дает вам гибкость благодаря четкому разделению задач: стиль с помощью CSS и контроль с помощью JS. Чтобы упростить настройку, включены файлы SASS. Самое замечательное здесь то, что у вас есть неограниченные возможности для анимации вашей диаграммы с помощью API анимации Chartist, SMIL, который дает вам дополнительные опции анимации.
3. C3 JS
C3 JS библиотека для построения диаграмм на основе D3 JS Он оборачивает необходимый код для построения диаграмм с помощью D3 JS, поэтому вы можете пропустить написание кода D3 и просто ввести свои данные. C3 поставляется с различными API, которые вы можете легко использовать для управления своими графиками. Чтобы настроить диаграмму, определите свои собственные стили для данных классов CSS. Построить графики из простых линейных графиков, чтобы измерить графики. Проверьте эту страницу, чтобы увидеть, как работает библиотека.
4. Флот
Flot является плагином jQuery для создания диаграмм с интерактивными элементами, такими как включение или выключение серии, взаимодействие точек данных, панорамирование, масштабирование и многое другое. Flot поставляется с множеством опций типа диаграммы, и если вы хотите больше возможностей на диаграмме, вот несколько плагинов, которые вы также можете использовать. Графики будут хорошо работать с браузерами, которые поддерживают HTML-холсты.
5. EChart
Echart Это удивительно обширная библиотека из Китая, которая поддерживает несколько типов диаграмм, может обрабатывать большие данные (отображая до 200 000 точек данных на декартовой диаграмме), имеет масштабный роуминг, возможность легко извлекать, интегрировать и обмениваться данными между несколькими диаграммами, что позволяет один легко переключаться с одного типа данных на другой, и многое другое.
6. Пейти
Peity добавит мини-диаграмму на вашу веб-страницу. Это небольшой плагин jQuery, который превращает элемент в мини SVG линия, гистограмма, пончик или круговая диаграмма. Вам просто нужно создать элемент и дать значение как 1/5 и позвонить peity ( 'пирог') на этом элементе, чтобы сделать мини круговую диаграмму. Например, чтобы создать кольцевую диаграмму, которая будет выделена только на одну пятую, вот 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. Затем перечислите данные, которые вы хотите наметить, и внесите некоторые изменения в параметры диаграммы. Наконец, создайте объект диаграммы с идентификатором, и на своей веб-странице создайте NVD3 представляет собой набор диаграмм и компонентов для повторного использования, созданных с помощью D3 JS. Эта библиотека, следовательно, является «шаблоном», который поможет вам легче строить диаграммы. Ознакомьтесь с множеством типовых диаграмм, созданных с помощью NVD3, здесь.
9. NVD3
Теперь прочитайте: библиотеки JavaScript для создания интерактивных и настраиваемых карт
