Vytvárajte dynamické grafy rýchlo na D3 pomocou programu Plottable.js

Voľný Knižnica D3.js je len jedným z mnohých, ktoré vám umožňujú vytvárať interaktívnu grafiku na stránke. Zatiaľ čo D3 je snáď najobľúbenejší z banda, učenie sa ho používať nie je ľahká úloha.

Preto Plottable.js je taká cenná knižnica. Je to bezplatný open-source projekt postavený na vrchole D3.js, čo uľahčuje vytváranie niekoho interaktívne grafy údajov od začiatku.

Táto knižnica spracováva všetky špinavé práce, takže sa môžete zamerať na špecifiká, ako sú údaje. Plottable generuje správny kód pre veľkosť a polohu akéhokoľvek grafu, ktorý si vyberiete.

Každý graf má vlastnú zložku v Plottable, kde môžete skopírujte / prilepte kód šablóny prehodnotiť graf na vlastnú päsť. Od tohto písania môžete vybrať 10 grafov štýlov grafov, vrátane stĺpcových grafov, koláčových grafov, rozptýlených grafov a pozemkov.

Môžeš znova zostavte komponenty samostatne a prispôsobiť ich nastavenia dynamicky. Týmto spôsobom môžete ľahko meniť interaktívne prvky, farby, animácie, polohovanie, veľkosti a čokoľvek iné, čo potrebujete.

úplná knižnica je k dispozícii v službe GitHub, ak chcete prehľadávať zdrojový kód a stiahnuť kópiu.

Najlepší spôsob, ako sa naučiť, je napríklad príkladom. Preto by ste sa mali pozrieť na ich vzorové grafy spustené Plottable ako funguje v akcii.

Každý graf je plne interaktívne, so zdrojovým kódom na zavádzanie. Ak chcete znovu vytvoriť podobný graf, jednoducho skopírujte / prilepte kód JS a preformátujte podľa potreby.

Mám dve osobné obľúbené zo svojej stránky: Calendar Heatmap modelované podľa dosky aktivity spoločnosti GitHub a Synchronizované grafy s funkciami dynamického výberu.

Ak ste predtým nikdy nepoužili D3.js, budete sa snažiť naučiť túto knižnicu. Zvlášť, pretože to je písaný v typeScript, takže si to pravdepodobne budete chcieť vyzdvihnúť. Konečný kód je skompilovaný do jazyka JavaScript ES5, tak by to malo byť pracovať vo všetkých hlavných prehliadačoch.

Ak sa chcete potápať, pozrite sa na ich Stránka tutoriálov plný praktických zdrojov. Dozviete sa všetko, čo potrebujete, aby ste mohli začať s programom Plottable a vytvárať dynamické webové grafy od začiatku.