9 Javascript библиотеки за изграждане на интерактивни графики

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

Но нека вземем някаква стъпка: нека добавете анимация и интерактивност към тези графики, така че читателите могат не само да научат нещо ново от графиката, но и да играят с нея. Това всъщност е по-лесно, отколкото звучи, благодарение на редица JS библиотеки. Нека ги проверим.

1. Графика JS

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

2. Chartist JS

Чартист JS е голяма библиотека за изграждане на отзивчиви графики, които използват SVG. Освен отзивчивостта, Chartist ви дава гъвкавост, като използвате ясно разделение на притесненията: стил с CSS и контрол с JS. За да се улесни персонализирането, SASS файловете са включени. Най-хубавото тук е, че имате неограничени възможности да анимирате графиката си с помощта на API за анимация на Chartist, SMIL, която ви дава допълнителни опции за анимация.

3. C3 JS

C3 JS е библиотека за изграждане на графики, базирани на D3 JS. Той включва необходимия код за изграждане на диаграми с D3 JS, така че можете да пропуснете писането на D3 кода и просто да въведете данните си. C3 идва с разнообразие от API, които можете да използвате за лесно управление на графиките. За да персонализирате графиката си, определете свои собствени персонализирани стилове за дадените CSS класове. Изграждайте диаграми от прости графики, за да измервате графики. Разгледайте тази страница, за да видите как работи библиотеката.

4. Флот

Flot е jQuery plguin за създаване на диаграми с интерактивни елементи, като включване или изключване на серия, взаимодействие на данни, панорамиране, мащабиране и др. Флот идва с разнообразни опции за тип диаграма и ако искате повече възможности на графиката, ето някои приставки, които можете да използвате. Графиките ще работят добре с браузъри, които поддържат 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

Можете да създавате интерактивни диаграми и инструменти за данни, като използвате Google API за визуализация чрез Google Chart. Има галерии с графики, за да проверите възможностите на Google Chart за визуализация на данните. За да започнете, вградете прост JavaScript в уеб страницата си, за да заредите необходимите ви библиотеки на Google Chart. След това избройте данните, които искате да начертаете, и направете някои персонализации чрез опциите на диаграмата. Накрая създайте обект на диаграма с идентификатор и на уеб страницата си създайте a

с този идентификатор за показване на графиката ви.

9. NVD3

NVD3 е набор от многократни диаграми и компоненти на графика, които са изградени с D3 JS. Тази библиотека е "шаблон", която ще ви помогне да улесните изграждането на диаграми. Вижте многото примерни диаграми, построени с NVD3 тук.

Сега прочетете: JavaScript библиотеки за създаване на интерактивни и персонализирани карти