Това са най-добрите библиотеки на диаграми на JavaScript за 2019 г.

Първо, кратка история:

С събирането и използването на данни, които продължават да се увеличават експоненциално, необходимостта от визуализиране на тези данни става все по-важна. Разработчиците се стремят да обединят милиони записи от бази данни в красиви диаграми и табла, които хората могат бързо и интуитивно да интерпретират.

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

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

Въведете текущата ера на визуализация на данни, доминирана от JavaScript и SVG (Scalable Vector Graphics). Графиките вече се изпълняват във всички браузъри, без специални приставки, поддържат интерактивност и анимации и изглеждат остри дори на устройства с най-висока разделителна способност. Преглеждайки над 50 библиотеки за визуализация, тези 9 продукта се откроиха:

D3.js

D3.js е много обширна и мощна графична JavaScript библиотека. Позволява ви да свързвате произволни данни с обектния модел на документ (DOM) и след това да прилагате управлявани от данни трансформации към документа.

D3 надхвърля типичните библиотеки за диаграми, включително много други по-малки технически модули като оси, цветове, йерархии, контури, облекчаване, полигони и др. Всичко това прави стръмна крива на обучение.

Опитът за създаване на проста диаграма може да бъде сложен. Всички елементи, включително осите и други елементи на диаграмата, трябва да бъдат дефинирани изрично. Много проби показват как CSS може да се използва за стилизиране на елементи на диаграмата. Никакви функции, базирани на графики, не се прилагат автоматично. Ако искате да влезете в плевелите и да използвате творчество, за да контролирате напълно всеки елемент, това е най-добрият избор. Работейки срещу часовника, за да отговори на изискванията на проекта за визуализация на данни, може да не е най-добрият избор, започвайки от нулата.

D3.js може да бъде градивен елемент за графична библиотека. Разработчиците са използвали D3, за да улеснят използването на графични решения, които го консумират, като NVD3.

D3.js е с отворен код и безплатен за използване.

JSCharting

Библиотеката на диаграмите 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 Charts

Графиките на 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

KoolChart е библиотека за диаграми на JavaScript, базирана на HTML 5 на платното. Предлага се и картографиране и мрежов продукт.

Новото им издание v5 включва по-интерактивен набор от функции и актуализиран стил. Визуалните елементи са изчистени и модерни. Използването на платно предлага по-добра производителност за сметка на това, че е базирана на растер.

Пробите използват XML базиран на низове за прилагане на опции на диаграмата, което изглежда по-малко практично от други подходи. Тези опции изглеждат като HTML5, но са зададени чрез JavaScript низ.

API е добре документиран с примерни диаграми за всяко свойство. Налично е и ръководство за PDF от 173 страници.

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

Chart.js

Chart.js е JavaScript библиотека с отворен код, поддържаща 8 типа диаграми. Това е малка js библиотека само с 60kb. Видовете включват линейни диаграми, лентови диаграми, областни диаграми, радар, кръгови диаграми, балон, разпръснати участъци и смесени. Поддържа се и времеви ред. Той използва елемент на платно за рендиране и реагира при преоразмеряване на прозореца, за да поддържа гранулиране на мащаба. Той е обратно съвместим с IE9. Предлагат се и Polyfills за работа с IE7.

Примерните визуални изображения са доста модерни и включват първоначални анимации, когато рисувате за първи път. Той анимира плавно при добавяне на серии или точки от данни в реално време. Опциите на диаграмата могат да бъдат модифицирани след и извикването на функцията за актуализация () пречертава диаграмата.

Примерен изходен код не се показва в галерията на уебсайта, но е достъпен в репозитория на GitHub. Опциите за конфигуриране се използват за създаване и промяна на диаграми. API за опции е изчистен и интуитивен.

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

Chart.js е библиотека с отворен код и безплатна за лична и търговска употреба, което е плюс. Ограниченият брой типове може да е проблем за по-разширените изисквания на таблото за управление.

Заключение

Екосистемата на графичните библиотеки на JavaScript се е развила значително през последното десетилетие. Днес има голям брой графични продукти, които отговарят на много разнообразни изисквания, обслужващи широк спектър от проекти, макар и стотици видове диаграми. Повечето библиотеки предоставят безплатна пробна версия или маркова версия, която ви позволява да оцените ефективността на диаграмата със собствени данни, зареждане и сложност на проекта.

За повечето библиотеки с диаграми е лесно да се справят с прости кураторски набори от данни и статични визуализации. Диаграмите обаче не винаги могат да се справят гладко с нещата, когато се визуализират динамични данни в реалния свят. Може да се наложи повече работа за настройване и подреждане на елементите, така че диаграмите да изглеждат правилни и това ръчно ощипване може да се счупи при визуализиране на нови динамични данни.

За да изберете най-доброто решение за JS диаграма за вашите уникални нужди, препоръчвам да тествате собствените си данни спрямо няколко от изброените по-горе библиотеки, за да осигурите идеалното приспособяване за вашите настоящи и бъдещи проекти.