Це найкращі бібліотеки діаграм JavaScript на 2019 рік

По-перше, коротка історія:

Коли збирання та використання даних продовжує зростати в експоненціальному масштабі, необхідність візуалізації цих даних стає все більш важливою. Розробники прагнуть об'єднати мільйони записів баз даних у прекрасні діаграми та інформаційні панелі, які люди можуть швидко та інтуїтивно інтерпретувати.

Технологія візуалізації даних продовжує вдосконалюватися протягом останнього десятиліття, і багато сучасних бібліотек діаграм тепер доступні для споживачів. На початку 2000-х в генерації діаграм переважали растрові графіки зображень на стороні сервера. Плагіни, такі як Flash та Silverlight, запропонували більш інтерактивний досвід графіків, але з великим впливом на швидкість завантаження, ресурс акумулятора та системні ресурси.

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

Введіть поточну епоху візуалізації даних, в якій переважають JavaScript та SVG (масштабована векторна графіка). Діаграми тепер працюють у всіх браузерах, без спеціальних плагінів, підтримують інтерактивність та анімацію і виглядають різкими навіть на пристроях з найвищою роздільною здатністю. Переглянувши понад 50 бібліотек візуалізації, ці 9 продуктів виділилися:

D3.js

D3.js - це дуже велика і потужна бібліотека графічних JavaScript. Це дозволяє прив’язати довільні дані до об'єктної моделі документа (DOM), а потім застосувати до документа перетворення, керовані даними.

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

Спроба створити просту діаграму може бути складною. Усі елементи, включаючи осі та інші елементи діаграми, повинні бути чітко визначені. Багато зразків показують, як CSS може використовуватися для елементів елементів діаграми. Жодні функції на основі графіків не застосовуються автоматично. Якщо ви хочете потрапити в бур’ян і використовувати творчість для повного контролю над кожним елементом, це найкращий вибір. Працюючи цілодобово для задоволення вимог проекту візуалізації даних, можливо, це не найкращий вибір, починаючи з нуля.

D3.js може бути складовим елементом для бібліотеки графіків. Розробники використовували D3, щоб полегшити використання графічних рішень, які споживають його, наприклад NVD3.

D3.js є відкритим кодом та безкоштовний у використанні.

ЗАТ

Бібліотека діаграм JSCharting підтримує велику кількість типів діаграм, включаючи карти, гант, акції та інші, які часто потребують використання окремих бібліотек. Він включає вбудовані карти всіх країн світу та бібліотеку іконок SVG. Набір самостійних мікро-діаграм може відображатись у будь-яких ярликах діаграми або в будь-якому елементі div на сторінці. Елементи керування користувальницьким інтерфейсом (UiItems) також включені, що дозволяє отримати більш багаті інтерактивні графіки. Керувати змінами даних або візуалізації в режимі реального часу досить просто, а діаграми можна експортувати у формати SVG, PNG, PDF та JPG.

Галерея поділена на типи діаграм та зразки зображень. Стиль діаграми відшліфований і дає кілька чітких графіків. Загальна візуальна фотографія забезпечує чіткий та професійний досвід роботи із графіком.

Включені зразки використовують об’єкт конфігурації для налаштування діаграм. Параметри для створення та керування типами діаграм дуже прості у використанні. Для встановлення більш складних типів діаграм потрібно кілька налаштувань властивостей, і JSCharting має сильні та динамічні параметри за замовчуванням, тобто він намагається автоматично вибрати найкращі настройки для сценаріїв.

Документація включає безліч навчальних посібників та ретельний опис властивостей API. Багато властивостей включають приклади використання та зразки посилань.

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

Високі показники

Highcharts - популярна бібліотека графіків JavaScript, яка використовується багатьма найбільшими компаніями світу. Графіки генеруються за допомогою SVG та резервного копіювання до VML для зворотної сумісності аж до IE6 / IE8. Демо-діаграми демонструють досить багатий набір функцій, але візуально не дивляться. Загальна документація включає підручники з багатьох відповідних тем, а документація API - ретельна.

Діаграма використовує параметри конфігурації для створення діаграм, а API простий у використанні.

Highcharts безкоштовний для некомерційного та особистого використання. Комерційне ліцензування потрібно для іншого використання, а картки карт та гантів ліцензуються окремо.

amCharts

amCharts нещодавно випустила свою версію 4, яка додає потужну систему анімації SVG, яка дозволяє створювати фільмові схожі сцени.

Демо-діаграми виглядають дуже приємно. Більшість демонстраційних версій пропонують певну кількість палітри та повзунковий інтерфейс для налаштування змінних діаграм у режимі реального часу. Документація включає багато навчальних посібників та повний опис властивостей API.

Створення діаграми трохи відрізняється від підходу, заснованого на конфігурації, і натомість використовує більш декларативний API. Для налаштування діаграм потрібно трохи більше коду, але дає кращий досвід заповнення коду.

amCharts пропонує безкоштовну ліцензію з фірмовими діаграмами та платними ліцензіями для іншого використання.

Google Charts

Діаграми Google є потужними та простими у користуванні.

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

Кожен тип діаграми має спеціальний підручник із живими прикладами. Підручники містять код відповідних функцій та списки API. Це приємне враження, починаючи з нової бібліотеки діаграм.

Діаграми налаштовуються за допомогою об'єкта параметрів конфігурації. Набори даних заповнюються за допомогою класу DataTable, який може споживатися усіма діаграмами. Кожен тип діаграми має унікальні параметри, перелічені в навчальних посібниках для конкретного типу. Іменування властивостей стандартизовано, і багато варіантів працюють у всіх типах.

Діаграми Google безкоштовні, але є застереження. Це веб-сервіс, і його не можна розмістити на місцевому рівні. У минулому Google вийшов у відставку API, тому, якщо ваше використання є критичним завданням, ви можете вибрати інший варіант.

ZingChart

ZingChart пропонує безліч типів діаграм та інтегрується з кутовими, реагуючими та іншими рамками. Він має сильний набір функцій з багатьма параметрами налаштування.

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

Документація включає підручники для всіх доступних типів, достатню кількість функцій та повний перелік API.

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

ZingChart можна безкоштовно використовувати з брендингом. Платне ліцензування доступне для використання без бренду.

FushionCharts

FusionCharts існує вже багато років, починаючи з плагіна на базі Flash. Це надійна бібліотека візуалізації діаграм. Він підтримує безліч форматів даних, включаючи XML, JSON та JavaScript, працює в сучасних браузерах і назад сумісний з IE6. Також підтримуються багато фреймворків JavaScript та мов програмування на стороні сервера.

Галерея діаграм включає велику кількість прикладів і вони мають чіткий візуальний вигляд.

Документація включає хороші описи API та приклади кожного типу діаграм. Властивості конфігурації групуються за завданнями та особливостями діаграми.

Діаграми створюються за допомогою параметрів, що базуються на конфігурації, і їх відносно просто використовувати. Список властивостей може бути довгим при копанні вглиб API. Усі властивості конфігурації дрібні, такі як {chartLeftMargin, showAlternateHGridColor}. Це здається спробою покращити заповнення коду.

FusionCharts є безкоштовним для особистого користування з брендингом діаграм. Платне ліцензування доступне для некомерційного та комерційного використання.

КОЛЧАРТ

KoolChart - бібліотека графіків JavaScript на основі HTML 5 на полотні. Також доступний виріб для картографування та сітки.

Їх новий випуск v5 включає більш інтерактивний набір функцій та оновлений стиль. Візуальні фільми чисті та сучасні. Використання полотна забезпечує кращі показники за рахунок растрової основі.

Зразки використовують XML на основі рядків для застосування параметрів діаграми, що здається менш практичним, ніж інші підходи. Ці параметри виглядають як HTML5, але встановлюються через рядок JavaScript.

API добре задокументований з прикладними діаграмами для кожного ресурсу. Також доступний PDF-посібник із 173 сторінок.

Для оцінки доступний двомісячний пробний період. Ліцензування потрібно після закінчення пробного періоду.

Chart.js

Chart.js - це бібліотека JavaScript з відкритим кодом, яка підтримує 8 типів діаграм. Це невелика бібліотека js усього 60 кб. Типи включають в себе лінійні діаграми, гістограми, діаграми площі, радари, кругові діаграми, міхур, розкидання сюжетів та змішані. Також підтримується часовий ряд. Він використовує елемент полотна для візуалізації та реагує на розмір вікна, щоб підтримувати деталізацію масштабу. Він сумісний із IE9. Для роботи з IE7 також доступні поліфіли.

Зразкові візуальні картини досить сучасні і включають початкові анімації при малюванні вперше. Він плавно анімує при додаванні точок серії або даних у режимі реального часу. Параметри діаграми можуть бути змінені після виклику функції update () перемальовує діаграму.

Зразок вихідного коду не відображається в галереї веб-сайтів, але доступний у репортажі GitHub. Параметри конфігурації використовуються для створення та зміни графіків. API параметрів чистий та інтуїтивно зрозумілий.

Документація ретельна та включає підручники з API властивостей та фрагменти коду.

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

Висновок

За останнє десятиліття екосистема бібліотек графіків JavaScript значно розвинулася. Сьогодні існує велика кількість продуктів графіків, які відповідають дуже різноманітним вимогам, які обслуговують широкий спектр проектів, хоча сотні типів діаграм. Більшість бібліотек надають безкоштовну пробну чи фірмову версію, що дозволяє оцінити ефективність діаграми за допомогою власних даних, завантаження та складності проекту.

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

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