Изграждане на динамични графики бързо на D3 с Plottable.js

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

Ето защо Plottable.js е толкова ценна библиотека. Това е безплатен проект с отворен код построена върху D3.js, улеснява създаването на всеки интерактивни графики с данни от нулата.

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

Всяка диаграма има свой собствен компонент в Plottable, където можете копирайте / поставете кода на шаблона да възстановите таблицата по своему. От момента на писане можете да избирате от 10 стила на графиката на графиката, включително бар графики, кръгови диаграми, графики за разпръскване и графики за площ.

Можеш възстановяване на компонентите поотделно и персонализирайте техните настройки динамично. По този начин можете лесно да променяте интерактивни елементи, цветове, анимации, позициониране, размери и каквото и да е друго.

Най- пълна библиотека е на разположение в GitHub, ако искате да прегледате изходния код и да изтеглите копие.

Но най-добрият начин да научите е чрез пример. Ето защо трябва да погледнете техните примерни графики, изпълнявани Plottable за да видим как работи в действие.

Всяка графика е напълно интерактивен, с изходния код за зареждане. Ако искате да възстановите подобна графика, просто копирайте / поставете JS кода и преформатирайте, ако е необходимо.

Имам два лични фаворита от сайта им: Календарна Heatmap по образец на таблото за активност на GitHub и Синхронизирани графики с функции за динамичен избор.

Ако никога не сте използвали D3.js, тогава ще се опитате да научите тази библиотека. Особено, защото е написан в TypeScript, така че вероятно ще искате да го вземете. Окончателният код е компилиран в ES5 JavaScript, така трябва работа във всички основни браузъри.

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