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

Спочатку коротка історія:

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

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

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

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

D3.js

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

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

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

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

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

JSCхартинг

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

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

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

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

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

Highcharts

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

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

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

amCharts

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

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

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

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

Діаграми Google

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

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

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

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

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

ZingChart

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

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

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

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

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

FusionCharts

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. Polyfills також доступні для роботи з IE7.

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

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

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

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

Висновок

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

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

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