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

Таким чином, у вас є в руках тонни даних, з низкою змінних, які ви повинні якось передати комусь іншому. Їм важко зрозуміти необроблені, неорганізовані дані. Ось чому вам потрібна допомога з графіків. У веб-дизайні, графіки є одним з кращих інструментів для візуалізації даних. Легко читається, легко на очах і порівняно легко налаштовується.

Але давайте розберемося: давайте додайте анімацію та інтерактивність до цих діаграм, щоб читачі могли не тільки дізнатися щось нове з діаграми, але і зіграти з ним. Це насправді легше, ніж здається, завдяки ряду бібліотек JS. Давайте перевіримо їх.

1. Графік JS

Chart.js це бібліотека без залежностей для побудови діаграм у 6 різних типах: лінійні діаграми, стовпчикові діаграми, радарні діаграми, діаграми полярних областей, діаграми пирога і пончика. Бібліотека також розділена за типом діаграми, щоб ваші сторінки не заплуталися з тим, що не потрібно. Він підтримує чуйний дизайн, і ви можете легко змінювати змінні, такі як колір або анімація, щоб налаштувати інтерфейс діаграми.

2. Chartist JS

Chartist JS це велика бібліотека для створення адаптивних діаграм, які використовують SVG. Крім чутливості, Chartist дає вам гнучкість, використовуючи чітке розмежування проблем: стиль з CSS і управління з JS. Для полегшення налаштування включені файли SASS. Найкраще тут у вас є безмежні можливості для анімації діаграми за допомогою API анімації Chartist, SMIL, яка надає додаткові параметри анімації.

3. C3 JS

C3 JS це бібліотека для побудови діаграм на основі D3 JS. Вона записує необхідний код для побудови діаграм з D3 JS, так що ви можете пропустити написання коду D3 і просто ввести свої дані. C3 поставляється з різними API, які можна використовувати для легкого керування графіками. Щоб налаштувати діаграму, визначте власні стилі для цих класів CSS. Створюйте діаграми з простих лінійних діаграм для визначення діаграм. Перегляньте цю сторінку, щоб дізнатися, як працює бібліотека.

4. Флот

Флот є плюгином jQuery для створення діаграм з інтерактивними елементами, наприклад, включення або вимикання серій, взаємодії точок даних, панорамування, масштабування та багато іншого. Флот поставляється з різними опціями типу діаграми, і якщо ви хочете більше можливостей на вашому графіку, ось деякі плагіни, які ви можете використовувати також. Графіки будуть добре працювати з браузерами, які підтримують полотна HTML.

5. EChart

Echart є надзвичайно повноцінною бібліотекою з Китаю, яка підтримує декілька типів діаграм, може обробляти великі дані (побудовані до 200 000 точок даних на декартовій діаграмі), має масштабний роумінг, можливість легко витягувати, інтегрувати та обмінювати дані між багатьма діаграмами, одне - легко перемикатися з одного типу даних на інший, і набагато більше.

6. Peity

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. Потім наведіть список потрібних даних і зробіть деякі налаштування за допомогою параметрів діаграми. Нарешті, створіть об'єкт діаграми з ідентифікатором, а на веб-сторінці створіть a

з цим ідентифікатором для відображення діаграми.

9. NVD3

NVD3 являє собою набір повторно використовуваних діаграм і компонентів діаграми, які побудовані за допомогою D3 JS. Ця бібліотека, отже, є "шаблоном", який допоможе вам спростити побудову діаграм. Ознайомтеся з багатьма діаграмами зразків, побудованими з NVD3 тут.

Тепер читайте: бібліотеки JavaScript створюють інтерактивні та індивідуальні карти