11 JavaScript рамки за създаване на графики
Javascript рамките могат да изпълняват редица функции. Тук ще разгледаме някои библиотеки, които ще ви помогнат да създадете зашеметяващи графики.
Браузърът предлага няколко мощни API и повърхности за рисуване. Най-забележителните са елемента на платното и мащабируемата векторна графика (SVG). И двете функции вече са достъпни в почти всички настолни и мобилни браузъри, но API-тата, необходими за тяхното използване, са доста ниско ниво и „ниско ниво“ обикновено се превръща в много досаден и излишен код, само за да се правят прости неща.
Тъй като писането на досаден и излишен код не е високо в списъка с неща, които разработчиците обикновено обичат да правят, дори и с най-добрите редактори на кодове и най-добрите лаптопи за програмиране , за щастие има няколко библиотеки на разположение, които да ви помогнат с всички изисквания на вашия браузър за рисуване.
В тази статия ще разгледаме някои от наличните опции. Ще изследваме най-популярните библиотеки на JavaScript и ще говорим за техните силни и слаби страни. Също така ще направим малко спекулации в някои от по-малко известните проекти, които запълват някои много интересни нужди - такива, за които не знаете, че ви трябват, докато не ви потрябват. Започвайки от нулата? Опитайте топ уеб конструктор , и помислете кой уеб хостинг услугата е подходяща за вас.
01. D3.js
D3.js е големият шеф на графичните библиотеки на JavaScript. С над един милион изтегляния на седмица над морското равнище , е напълно вероятно най-добре познатата и широко използвана от всички графични библиотеки. Дори има свой собствен Страница в Уикипедия . И, нека си признаем, не е ли това, когато знаете, че сте стигнали до голямото време?
D3 ви позволява да създавате визуализации на данни от всякакъв вид. Трябва само да погледнете през него страница с примери за да видите света на възможностите. Още по-добре, посетете Шърли Ву интерактивна визуализация на всеки ред в мюзикъла „Хамилтън“, ако наистина искате да ви издуха ума.
D3 е всеобхватен инструмент. Той има свой собствен DOM избор, AJAX възможности и дори собствен патентован генератор на числа. Всеки компонент на D3 е свой собствен модул Node, който трябва да бъде импортиран. Например модулът за избор се нарича d3-selection. Има и модули за масиви, форми, цветове, плъзгане и пускане, време и много други.
Мощността на D3 идва с компромиса със сложността. Кривата на обучение може да бъде стръмна и кодът все още да се чувства многословен. Изграждането на нещо толкова просто като стълбовидна диаграма изисква ръчно да съберете оста, везните, отметките и дори да нарисувате правоъгълниците, които ще представляват лентите. Разработчиците често се оплакват от ниското ниво на разбиране, необходимо за ефективността на D3.
Това е до голяма степен, защото създаването на сложни визуализации на данни изисква да имате ниско ниво на разбиране на визуализацията, която искате да създадете. D3 не е най-добрият вариант за предварително изпечени диаграми. За това има няколко други избора, които ще ви намерят в „ яма на успеха ' много по-бързо.
D3 е способен да изобразява на платно и SVG. Истинската магия на D3 обаче е в способността му да „свързва данни“ с графиките, които генерира. Помислете за диаграма, която се променя при промяна на входящите данни. С SVG всеки графичен елемент е индивидуален елемент, който може да бъде избран и актуализиран. Това не е възможно с платното и тъй като D3 основно се отнася до захранването на визуализации на данни, SVG обикновено е предпочитаният изходен формат.
02. Chart.js
Chart.js е проект с отворен код за изграждане на стабилни диаграми с JavaScript. Голямата разлика между Chart.js и D3 е, че докато можете да изграждате почти всичко с D3, Chart.js ви ограничава до осем предварително изградени типа диаграми: линия, лента, пай, полярен, балон, разпръснат, площ и смесен. Въпреки че това изглежда ограничаващо, това е, което прави Chart.js по-лесно да започнете. Това важи особено за онези, които не са експерти в областта на данните, но познават пътя на основната диаграма.
Синтаксисът е изграден около тип диаграма. Инициализирате нова диаграма върху съществуващ елемент на платно, задавате типа на диаграмата и след това задавате опциите на диаграмата. Chart.js се изобразява само на платно. Това не е проблем, тъй като всички съвременни браузъри поддържат елемента HTML canvas, но може да е прекъсване за разработчици, които имат изисквания за поддръжка на SVG.
Това също означава, че сте ограничени в възможните анимации. Извън кутията Chart.js има поддръжка за всички уравнения за облекчаване и анимациите са посочени с една настройка на свойството. Въпреки че това улеснява бързото и лесно получаване на анимирана диаграма, липсата на отделни SVG елементи ви пречи да можете да правите сложни анимации, използвайки CSS3 преходи и анимации.
За разлика от D3, Chart.js не е модулен, така че е необходимо само едно включване на JavaScript, за да получите поддръжка за всички функции и типове диаграми. Това улеснява започването, но означава, че активите ви могат да бъдат много по-големи. Това е особено вярно, ако имате нужда от времеви оси - Chart.js тогава изисква Moment.js, който е ~ 51kb минимизиран и цип. Далеч диаграмата е много по-лесно с Chart.js, отколкото с D3. Има обаче таван, който идва с простотата. Може да откриете, че сте достигнали границата на това, което ще направи извън кутията. Често разработчиците започват с решение като Chart.js и след това преминават към D3.
Ако простотата на Chart.js ви привлича, може наистина да ви хареса следващата опция: Chartist.
03. Чартист
Чартист има за цел да бъде проста, опростена библиотека с диаграми, която е с малки размери и с която лесно можете да започнете. Той също така е проектиран да реагира по подразбиране. Това е по-голяма сделка, отколкото звучи, тъй като рамки като D3 не оразмеряват автоматично диаграмите, но изискват от разработчика да се обвърже със събития и да преначертае графики.
Chartist също е малък в сравнение с Chart.js. Той тежи само 10KB с нулеви зависимости. Това може да се дължи на факта, че предлага само три типа диаграми: линия, лента и пай. Има вариации в тези типове (т.е. разпръснатият график е тип линия в Chartist), но малкият размер и лекотата на конфигуриране се противопоставят на липсата на готови типове диаграми.
Chartist се изобразява в SVG вместо на платно, което го прави много по-персонализиран по отношение на външния вид и усещането, както и осигурява много по-голям контрол върху интерактивността и анимациите. Обаче липсата на достъп до платно означава, че може да ви е по-трудно да извършите определени действия. Например има API за изобразяване на платно към изображение (toDataURI). Тази опция не съществува за SVG, така че експортирането на диаграма като изображение ще се окаже много по-сложно. В идеалния свят ще имате възможност да изобразите и двата режима.
Chartist диаграмите са по-лесни за конфигуриране от Chart.js, тъй като има по-малко налични опции. Въпреки че е възможно да се разширят тези диаграми с доста функционалност, фокусът им върху простотата означава, че те по дефиниция са прости. Chartist е чудесно решение за тези, които се нуждаят от основно решение за графики. Диаграмите по своята същност са трудни за конфигуриране, тъй като изискват някакъв вид знания за това как да настроите данните по определена ос и групирани по определени начини. Chartist прави графичната част възможно най-опростена, но може да се окажете в нужда от по-мощно решение, когато се чувствате по-удобно при генерирането на вашите диаграми.
Chartist също изброява поддръжка на рамка с отворен код, включително React и Angular. На сайта му не се споменава пакет Vue.
04. Britecharts
Britecharts е графична библиотека, която обгръща D3. Той е направен от Eventbrite, който след това отвори проекта под разрешителния лиценз Apache V2.
Той предлага много минимален, но естетически приятен набор от диаграми. Въпреки че може да бъде доста задача да се създаде стълбовидна диаграма с ванилия D3, обвиването на Britecharts го прави толкова просто, колкото създаването на нов обект barChart и след това задаването на неговата ширина и височина.
barChart.width(500).height(500);Britecharts има поддръжка за всички основни типове диаграми: линия, лента, поничка, куршум, разпръснат парцел, искрица и стъпка, което е повече от предлаганите от библиотеки като Chartist. Той също така предоставя основна подсказка и функционалност на легендата. Анимациите за класациите са вградени и Eventbrite е предоставил няколко красиви цветови схеми.
В крайна сметка, Britecharts е чудесна възможност за основна функционалност на графиките. Обектите за конфигуриране са доста прости и все още получавате силата на D3 под завивките, без да се налага да знаете нищо за самия D3. Много разработчици ще намерят това за по-завладяваща опция от простото изграждане на пълна диаграма от нулата с D3.
Той също така се фокусира върху свързаните с данните аспекти на D3, което го прави доста добър за диаграми, които трябва да се променят като основни промени в данните. Макар и донякъде ограничаващ в наличните типове, той също има основен тип диаграма, който можете да разширите, за да създадете свои собствени типове диаграми.
05. Видове гмуркане
Стилове на гмуркане е друго графично решение, което обгръща сложността на D3 в лесен за изпълнение API. Тя е изградена върху концепциите от Граматиката на графиката , книга от автора Леланд Уилкинсън. Той предоставя разбиране кога и как да използвам кои визуализации на данни за показване на различни видове данни.
Извън кутията той разполага с диаграми на линии, ленти, разпръснати граници, площи и фасети. Той обаче прилага концепциите от Граматиката на графиката в „Taucharts Language“, който предоставя рамка, в която да приложите вашите собствени визуализации на данни.
Taucharts изглежда доста убедително и фактът, че е изграден на D3 го прави привлекателна и мощна опция. Има усещането обаче, че разработчикът също трябва да прочете Граматиката на графиката, за да се възползва напълно от силата си.
Досега сме обхванали само диаграми и визуализация на данни. Това е така, защото рисуването на диаграми е най-често използваният случай за графична библиотека в браузър. Но това в никакъв случай не е единственото. Друг доста често срещан сценарий за графика е, разбира се, анимацията.
06. Two.js
Да не се бърка с D3.js, two.js е JavaScript библиотека с отворен код за двумерно рисуване в мрежата. Също така е в състояние да насочва и трите графични опции в съвременните браузъри: SVG, Canvas и WebGL.
Two.js е донякъде подобен на D3, тъй като е строго фокусиран върху рисуването и няма предварително изпечени диаграми или интерактивни структури, от които да избирате. Това означава, че точно както D3, се нуждаете от основно разбиране за вида на чертежа, който се опитвате да направите, и как да го постигнете с конструкциите, предоставени от two.js. Изчертаването на кръг е доста лесно. Изграждането на подробна анимация, от друга страна, е много по-сложно начинание. Two.js абстрахира само досадата от фигури за рисуване, а не досадата на цялостната рисунка.
Two.js също така следи всички обекти, които създавате, за да можете да ги препращате и анимирате по всяко време. Това е особено важно, ако правите разработка на игри и имате активи, които трябва да бъдат проследени за неща като откриване на сблъсък. Той има вграден анимационен цикъл, който ви освобождава от необходимостта да се притеснявате за анимационни рамки и улеснява връзването в анимационна библиотека като GreenSock .
Докато two.js е мощен, естеството му в свободна форма може да остави някои разработчици несигурни как да започнат и е по-скоро нишов инструмент за 2D рисуване и анимация. Друг отличен вариант е pts.js.
07. Pts.js
Точки също е двуизмерна библиотека за рисуване. Той обаче е фундаментално различен от two.js, тъй като използва предварително определена методология за начина на сглобяване на рисунките и анимациите: пространство, форма и точка. Аналогията, която нейните разработчици използват, за да обяснят това, е от физическия свят. Пространството е хартия. Формата е моливът. И точката е вашата идея.
По отношение на изпълнението му, пространството е платно елемент. След като елементът на платното е създаден, можете да добавите играчи към него. Това могат да бъдат или функции, или обекти. Тези функции и обекти трябва да отговарят на предварително определения интерфейс, който има дадено пространство. Pts е изграден на TypeScript, така че няма нужда да гадаете какви са те, тъй като инструментариумът, който използвате, вероятно ще предложи тези с автодовършване.
Например интервалът има функция за стартиране, която можете да зададете. Това е код, който се изпълнява, когато пространството е готово. В рамките на тези функции изчертаването в пространството се извършва с помощта на обекта на формата. Обектните форми могат да нарисуват всякакъв вид форма и точката е мястото, където тези елементи се намират в пространството.
Pts изглежда е предназначен предимно за създаване на интерактивни визуализации и анимации. Изпълнението му е интересно, макар и доста абстрактно. Разработчиците може трудно да разберат модела „пространство, форма, точка“, който Pts изисква. Това е още едно умствено препятствие, което ще трябва да бъде изчистено в допълнение към това просто да рисувате и анимирате фигури.
08. Anime.js
Anime.js е предимно библиотека за анимация. Той има вградена система за залитане, за да улесни разполагането със сложни анимации, които се припокриват или зависят от появата на друго изпълнение. Обичайно е анимациите да бъдат синхронизирани заедно или да се задействат една от друга. Зашеметяващата система прави това по-лесно за изпълнение, тъй като помага за облекчаване на някои режийни разходи при проследяване на всичко, което се случва на страницата и ръчно конфигуриране на времето за анимация.
За разлика от покритите досега библиотеки за рисуване, anime.js няма API за рисуване на фигури. Вместо това приема, че вашите форми вече съществуват и че искате да ги анимирате. Това го прави чудесен за използване с библиотеки като two.js. Anime.js има поддръжка за анимиране на CSS свойства, SVG, DOM и дори JavaScript обекти.
Anime.js е добър вариант за анимиране на съществуващи рисунки и вероятно ще бъде комбиниран с друга библиотека. Трябва да се разглежда като алтернатива на нещо като GreenSock, а не като заместител на други библиотеки за рисуване. Anime.js вероятно ще се използва за по-сложни анимации, които трябва да се случат като част от интерактивно уеб изживяване.
09. PixiJS
PixiJS е друга 2D библиотека за рисуване. Основната му цел е да улесни показването, анимирането и управлението на 2D графики, така че да можете да се съсредоточите върху изграждането на вашето преживяване или игра, без да се притеснявате да сте в крак с всички форми и изображения, които трябва да нарисувате и анимирате. Ако изграждате игра, активи (или спрайтове) могат бързо да се покачат до число, което е трудно за управление. (Много активи за спестяване? Пазете ги в най-надеждната съхранение в облака .)
Убедителният аспект на PixiJS е, че идва от API, който е създаден и се използва широко в Adobe Flash. Това е огромна полза за разработчиците, идващи от Flash фон, тъй като опитът ще се почувства познат. Също така е подобен на SpriteKit на Apple.
PixiJS не е игрален механизъм, така че ако го използвате за игри, няма да намерите никакви инструменти или физика за справяне с неща като откриване на сблъсък. Ще се наложи да го увиете в действителен двигател на играта или такъв, който изградите сами, ако се чувствате безстрашни.
PixiJS оказва на WebGL. WebGL е двигател за правене на графично ускорени графични процесори в браузъра. Това означава, че е полезен за анимации и графики, които използват много системни ресурси и биха се представили най-добре, когато се изобразяват от дискретен графичен процесор (GPU). Той се основава на OpenGL, който е еквивалент на работния плот за стартиране на игри и 3D графични програми. Под качулката WebGL използва елемента HTML canvas.
Сериозните разработчици на графики ще оценят силата на WebGL. Този опит обаче може да се влоши при машини с по-ниска мощност. Дори когато съставях тази статия, много от демонстрациите на PixiJS предизвикаха забележимо забавяне в моята система, която не разполага с по-високите възможности, необходими за сложни графики и анимации.
10. Zdog
Повечето от чертожните машини, които обсъждахме досега, са двуизмерни. Това е така, защото повечето от взаимодействията, които имаме с нашия екран, се извършват в две измерения - по оста X и Y. Триизмерните рисунки и анимации обикновено са много по-сложни.
Zdog е библиотека за изграждане на псевдо-3D преживявания, които са предимно плоски по природа. Нарича се псевдо-3D, защото докато концептуализира своите рисунки в 3D пространство, той ги прави като плоски форми. Той използва визуални трикове, за да направи 2D обектите да изглеждат 3D. Ефектът е наистина интересен. Изглежда напълно триизмерно, когато се гледа анимацията, но когато се направи екранна снимка, това очевидно е плоско изображение. Ето един пример: въртящата се демонстрация на Марио.
Тъй като изобразяванията са 2D, Zdog може да визуализира или към Canvas, или към SVG. Zdog е фантастична възможност за 3D анимации върху прости обекти - особено ако тези активи включват аспекти на плосък дизайн. Разработчиците, които искат 3D анимация, но не искат да потъват в сложния свят на 3D графичните двигатели, може да намерят Zdog адекватно решение. Освен това, със своя фокус върху плоски изображения, Zdog може да си позволи много по-опростен интерфейс и много по-висока производителност, отколкото би била необходима за 3D изобразяването на сложни графични изображения.
Той няма елементите на игрален механизъм, като управление на активи и откриване на сблъсъци, така че ще трябва да бъде увит в игрален механизъм или тези съображения да се полагат ръчно. Това означава, че Zdog вероятно е най-подходящ за изолирани 3D анимации на целевите страници.
11. Snap.svg
Snap.svg казва, че прави 'работата с вашите SVG активи толкова лесна, колкото jQuery прави работата с DOM'. Може да успеете да разберете от референцията за jQuery, че Snap.svg е малко по-стар, но неговият API се чувства толкова лесен като jQuery и това е доста мощно нещо.
Snap.svg има изчистен и прост API за избор на вашия основен SVG елемент и след това изчертаване на елементи към него. Той е най-подходящ за разработчици, които търсят бързо решение за анимиране на SVG. Особено добър вариант е, ако анимациите ви са прости и нямате много знания за анимационните машини. Въпреки че е донякъде датиран, със сигурност не бива да се пренебрегва, тъй като може да е най-лесният начин за работа с вашите SVG.
Snap.svg е освежаващ в своята простота. Обхванато е до работата по избор и работа със SVG и не се опитва да бъде повече от това. Snap може да се комбинира с други графични библиотеки тук за изчертаване и изобразяване в SVG. Също така е добре, ако имате съществуващи SVG и искате лесен начин да работите с тях.
Тази статия първоначално е публикувана в списание net.
Свързани статии:
