Szybko buduj dynamiczne wykresy w D3 za pomocą Plottable.js

Wolny Biblioteka D3.js to tylko jedna z wielu, które pozwalają tworzyć interaktywną grafikę na stronie. Podczas gdy D3 jest prawdopodobnie najbardziej popularnym z całej grupy, nauka korzystania z niego nie jest łatwym zadaniem.

Dlatego Plottable.js jest tak cenną biblioteką. To darmowy projekt open source zbudowany na szczycie D3.js, ułatwiając każdemu tworzenie interaktywne wykresy danych od podstaw.

Ta biblioteka obsługuje całą brudną robotę, więc możesz skupić się na szczegółach, takich jak dane. Plotowalny generuje prawidłowy kod dla rozmiaru i pozycji dowolnego wybranego wykresu.

Każdy wykres ma swój własny komponent w Plottable, gdzie możesz skopiuj / wklej kod szablonu aby samodzielnie odbudować wykres. W chwili pisania tego tekstu możesz wybierać spośród 10 stylów wykresów fabularnych, w tym wykresy słupkowe, wykresy kołowe, wykresy punktowe i wykresy powierzchni.

Możesz przebuduj komponenty indywidualnie i dostosuj swoje ustawienia dynamicznie. W ten sposób możesz łatwo zmieniać interaktywne elementy, kolory, animacje, pozycje, rozmiary i wszystko, czego potrzebujesz.

The pełna biblioteka jest dostępny na GitHub, jeśli chcesz przeglądać kod źródłowy i pobrać kopię.

Ale najlepszym sposobem nauki jest przykład. Dlatego powinieneś spojrzeć na ich przykładowe wykresy uruchomione Plottable aby zobaczyć, jak działa w działaniu.

Każdy wykres jest w pełni interaktywny, z kodem źródłowym do uruchomienia. Jeśli chcesz odbudować podobny wykres, po prostu skopiuj / wklej kod JS i przeformatuj zgodnie z potrzebami.

Mam dwie osobiste ulubione z ich strony: Kalendarz Kalendarz modelowane po tablicy aktywności GitHub i Zsynchronizowane wykresy z dynamicznymi funkcjami wyboru.

Jeśli nigdy wcześniej nie korzystałeś z D3.js, będziesz miał trudności z nauką tej biblioteki. Zwłaszcza, ponieważ to jest napisane w TypeScript, więc prawdopodobnie też będziesz chciał to odebrać. Ostateczny kod to skompilowany w JavaScript ES5, tak powinno być działa we wszystkich głównych przeglądarkach.

Jeśli chcesz nurkować, spójrz na ich Strona z samouczkami pełen przydatnych zasobów. Dowiesz się wszystkiego, czego potrzebujesz, aby zacząć od Plottable i do tworzyć dynamiczne wykresy internetowe od zera.