9 Biblioteki Javascript do tworzenia interaktywnych wykresów

Masz więc w ręku mnóstwo danych, z wieloma zmiennymi, które musisz jakoś przekazać komuś innemu. Surowe, niezorganizowane dane będą dla nich trudne do zrozumienia. Dlatego potrzebujesz pomocy z wykresów. W projektowaniu stron internetowych, wykresy są jednym z najlepszych narzędzi do wizualizacji danych. Jest łatwa do odczytania, łatwa dla oczu i stosunkowo łatwa w konfiguracji.

Ale weźmy sprawy w górę: niech dodaj animacje i interaktywność do tych wykresów, aby czytelnicy nie tylko nauczyli się czegoś nowego z wykresu, ale także bawili się nim. Jest to rzeczywiście łatwiejsze niż się wydaje, dzięki wielu bibliotekom JS. Sprawdźmy je.

1. Wykres JS

Chart.js jest biblioteką bez zależności do tworzenia wykresów w 6 różnych typach: wykresy liniowe, wykresy słupkowe, wykresy radarowe, wykresy biegunowe, wykresy kołowe i pączkowe. Biblioteka jest również podzielona zgodnie z typem wykresu, więc Twoje strony nie są zapchane tym, co nie jest potrzebne. Obsługuje responsywny projekt i można łatwo zmieniać zmienne, takie jak kolor lub animacja, aby dostosować interfejs wykresu.

2. Czartysta JS

Chartist JS to świetna biblioteka do tworzenia responsywnych wykresów wykorzystujących SVG. Oprócz zdolności reagowania, Chartist zapewnia elastyczność dzięki wyraźnemu rozdzieleniu obaw: styl z CSS i kontrola z JS. Aby ułatwić dostosowanie, dołączone są pliki SASS. Wspaniałą rzeczą jest to, że masz nieograniczone możliwości animowania wykresu za pomocą interfejsu API animacji Chartist, SMIL, który zapewnia dodatkowe opcje animacji.

3. C3 JS

C3 JS to biblioteka do tworzenia wykresów opartych na D3 JS. Zawiera wymagany kod do tworzenia wykresów za pomocą D3 JS, dzięki czemu można pominąć pisanie kodu D3 i po prostu wprowadzić dane. C3 jest wyposażony w szereg interfejsów API, które można łatwo kontrolować. Aby dostosować swój wykres, zdefiniuj własne style niestandardowe do danych klas CSS. Buduj wykresy z prostych wykresów liniowych do wykresów mierniczych. Sprawdź tę stronę, aby zobaczyć, jak działa biblioteka.

4. Flot

Flot jest jQuery plguin do tworzenia wykresów z elementami interaktywnymi, takimi jak włączanie i wyłączanie serii, interakcje punktów danych, panoramowanie, powiększanie i inne. Flot zawiera różne opcje typu wykresów, a jeśli chcesz mieć więcej możliwości na wykresie, oto kilka wtyczek, których możesz użyć. Wykresy będą dobrze współpracować z przeglądarkami obsługującymi płótna HTML.

5. EChart

Echart jest niesamowicie wszechstronną biblioteką z Chin, która obsługuje wiele typów wykresów, może przetwarzać duże dane (kreśląc do 200 000 punktów danych na wykresie kartezjańskim), obsługuje roaming w skali, możliwość łatwego wydobywania, integrowania i wymiany danych między wieloma wykresami, umożliwiając jeden, aby łatwo przełączać się z jednego typu danych na inny i dużo więcej.

6. Peity

Peity doda mini wykres do twojej strony internetowej. Jest to mała wtyczka jQuery, która przekształca element w mini svg wykres liniowy, słupkowy, pączkowy lub kołowy. Musisz tylko stworzyć element i nadać mu wartość 1/5 i zadzwoń peity („ciasto”) na tym elemencie zrobić mini wykres kołowy. Na przykład, aby utworzyć wykres pierścieniowy, który jest podświetlony tylko o jedną piątą, oto HTML:

1/5

Możesz dostosować kolor wykresu, promień, szerokość i wysokość, ale domyślnie jest wyświetlany w małym rozmiarze.

7. DC JS

DC JS ma podobieństwa z C3 JS pod względem zastosowanego silnika; oboje używają biblioteki D3 do renderowania wykresów w SVG. DC JS jest stworzony, aby pomóc Ci wizualizować dane i analizy dla przeglądarek i urządzeń mobilnych. Ponieważ korzysta z D3 JS, umożliwia dodanie interakcji użytkownika do wykresu. DC JS to potężna biblioteka do tworzenia wykresów od prostych do wysokich złożoności.

8. Google Chart

Możesz tworzyć interaktywne wykresy i narzędzia do danych za pomocą Google Visualization API za pośrednictwem Google Chart. Istnieją galerie wykresów, aby sprawdzić możliwości wizualizacji danych Google Chart. Aby rozpocząć, umieść prosty skrypt JavaScript na swojej stronie internetowej, aby załadować potrzebne biblioteki Google Chart. Następnie wymień dane, które chcesz odwzorować, i dokonaj dostosowań za pomocą opcji wykresu. Na koniec utwórz obiekt wykresu z identyfikatorem, a na swojej stronie internetowej utwórz

z tym identyfikatorem, aby wyświetlić wykres.

9. NVD3

NVD3 to zestaw wykresów wielokrotnego użytku i komponentów wykresów zbudowanych z D3 JS. Ta biblioteka jest zatem „szablonem”, który ułatwi Ci tworzenie wykresów. Sprawdź tutaj wiele przykładowych wykresów zbudowanych z NVD3.

Teraz czytaj: biblioteki JavaScript do tworzenia interaktywnych i dostosowanych map