Sestavte dynamické grafy rychle na D3 s Plottable.js

Volný Knihovna D3.js je jen jedna z mnoha, která vám umožní vytvářet interaktivní grafiku na stránce. Zatímco D3 je možná nejoblíbenější ze skupiny, naučit se ji používat není snadný úkol.

Proto Plottable.js je tak cenná knihovna. Je to volný open-source projekt postavený na vrcholu D3.js, usnadnit komukoli vytvořit interaktivní grafy dat od nuly.

Tato knihovna zpracovává všechny špinavé práce, takže se můžete zaměřit na specifika, jako jsou data. Plottable generuje správný kód pro velikost a umístění libovolného grafu, který si vyberete.

Každý graf má svou vlastní složku v Plottable, kde můžete zkopírujte / vložte kód šablony znovu sestavit graf na vlastní pěst. Od tohoto psaní si můžete vybrat z 10 stylů grafu grafu, včetně sloupcových grafů, výsečových grafů, spikleneckých grafů a grafů plochy.

Můžeš znovu sestavit komponenty individuálně a dynamicky přizpůsobit jejich nastavení. Tímto způsobem můžete snadno měnit interaktivní prvky, barvy, animace, umístění, velikosti a vše, co potřebujete.

plná knihovna je k dispozici na GitHub, pokud chcete procházet zdrojový kód a stahovat kopii.

Ale nejlepší způsob, jak se učit, je prostřednictvím příkladu. Proto byste se měli podívat na jejich ukázkové grafy spuštěné Plottable vidět, jak to funguje v akci.

Každý graf je plně interaktivní, se zdrojovým kódem. Pokud chcete znovu vytvořit podobný graf, zkopírujte / vložte kód JS a přeformátujte podle potřeby.

Mám dva osobní favority z jejich webu: Kalendář Heatmap modelovaný podle GitHubovy činnosti a Synchronizované grafy s funkcemi dynamického výběru.

Pokud jste předtím nikdy nepoužili D3.js, budete se snažit naučit tuto knihovnu. Zvláště proto, že je to psaný v TypeScript, takže to budete pravděpodobně chtít také vyzvednout. Konečný kód je zkompilovaný do ES5 JavaScript, tak by to mělo práce ve všech hlavních prohlížečích.

Pokud jste ochotni se potápět, podívejte se na jejich Stránka Návody plný užitečných zdrojů. Dozvíte se vše, co potřebujete, abyste mohli začít s Plottable a vytvářet dynamické webové grafy od nuly.