Biblioteki wykresów JavaScript: 13 popularnych wyborów

#1 – Chart.js

Chart.js to praktyczna biblioteka do tworzenia wykresów, która wykorzystuje <canvas> HTML5 do renderowania wykresów.

Biblioteka jest z łatwością najlepszym wyborem dla prostych projektów, ponieważ domyślnie jest responsywna, a także możesz zastosować efekty animacji w oparciu o zachowanie użytkownika.

Oto 8 rodzajów wykresów, które możesz tworzyć za pomocą Chart.js:

• Wykres powierzchniowy
• Wykres słupkowy
• Wykres bąbelkowy
• Wykresy pączków i ciast
• Wykres liniowy
• Mieszane typy wykresów
• Wykres obszaru polarnego
• Wykres radarowy

Jeśli chodzi o łatwość użycia, składnia jest prosta i nawet jeśli nigdy wcześniej nie pracowałeś z JavaScriptem, tworzenie nowego wykresu jest proste.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Jeśli chcesz rozszerzyć wykresy o funkcje dynamiczne i łączenie danych, biblioteka ma system wtyczek, których możesz użyć, aby dodać nowe funkcje.

Przykład Chart.js

Zobacz Pen Proof of concept: Chart.js z gradientem tła autorstwa Sven (@hofmannsven) na CodePen.

Dodatkowe zasoby Chart.js

• Chart.js + Next.js = Piękne, oparte na danych pulpity nawigacyjne
• Pierwsze kroki z Chart.js; Nauka zadaniowa

#2 – D3.js

Zacznę od stwierdzenia, że ​​D3 to narzędzie do wizualizacji danych, a nie tradycyjna biblioteka wykresów.

D3 pozwala określić zestaw danych i powiązać go z DOM, a następnie możesz użyć funkcji bibliotek do przekształcenia tych danych w unikalną reprezentację wizualną. Jeśli chodzi o prezentację wizualną, D3 wykorzystuje tabele HTML, SVG i <canvas> do renderowania danych na stronie.

Jeśli kiedykolwiek widziałeś jedną z tych wirujących kul geograficznych z wieloma interaktywnymi punktami danych, prawdopodobnie prezentacja została zbudowana za pomocą D3. Jednak sprawdza się również w zastosowaniach praktycznych, takich jak podstawowy wykres, który można zobaczyć w poniższym demo. Ostatecznie będziesz chciał zapoznać się z oficjalną sekcją samouczków dla D3, aby poznać jego bardziej skomplikowane możliwości.

Przykład D3.js

Zobacz wykres Pen D3 + ReactJS autorstwa Web Dev (@ronaldmarin) na CodePen.

Dodatkowe zasoby D3.js

• Samouczek D3.js
• Tworzenie mapy termicznej kalendarza D3.js

#3 – Apache ECharts

Jednym z powodów, dla których Apache ECharts jest tak popularny, jest to, że masz dostęp do setek gotowych przykładów wykresów od razu po wyjęciu z pudełka. Możesz to sprawdzić samodzielnie, odwiedzając katalog Przykłady. Ta strona obejmuje wykresy i przykłady w kategoriach, takich jak linie, słupki, wykresy kołowe, punktowe, mapy termiczne, wykresy i wiele innych.

Każdy przykład zawiera przykłady kodu JavaScript i TypeScript. Ale to nie wszystko, korzystanie z tej biblioteki ma kilka rzeczywistych korzyści. Oto kilka z nich:

• Strumieniowe przesyłanie danych. Chcesz tworzyć interaktywne wykresy z milionami punktów danych? ECharts używa protokołu WebSockets do przesyłania strumieniowego danych, dzięki czemu można je ładować asynchronicznie nawet w przypadku bardzo dużych zestawów danych.
• Przyjazny dla urządzeń mobilnych. Gdy użytkownicy przeglądają EChart na swoich urządzeniach mobilnych, sam wykres został zoptymalizowany w celu zapewnienia interaktywnych funkcji — powiększania, panoramowania i renderowania SVG, aby zapewnić najlepszą dostarczalność.
• Dane dynamiczne. Możesz podawać ECharts wiele (oddzielnych) punktów danych, a biblioteka automatycznie animuje wykres, aby zapewnić użytkownikom interaktywne wrażenia.
• Dostępność. Apache ECharts (v4.0 i nowsze) jest zbudowany zgodnie z wytycznymi WAI-ARIA.

Możesz także wyświetlać swoje wykresy w swojej witrynie internetowej za pomocą zewnętrznej sieci CDN.

Przykład EChart Apache

Zobacz przykład Pen Apache Echart autorstwa Vale (@vsigno) na CodePen.

Dodatkowe zasoby Apache ECharts

• Zbuduj lepsze narzędzie GitHub Insight w tydzień

#4 – Fabuła

Plotly jest spółką macierzystą Dash, niskokodowego rozwiązania do wdrażania aplikacji danych. I opracowują własną bibliotekę graficzną – Plotly – na miejscu.

Dzięki Plotly możesz tworzyć najbardziej podstawowe wizualizacje wykresów, ale prawdziwa siła biblioteki leży w możliwości tworzenia wykresów opartych na statystykach, reprezentacji danych 3D i wykresów opartych na danych finansowych.

Jest dostępny zarówno jako moduł Node.js, jak i może być używany bezpośrednio z CDN.

Przykład fabuły

Zobacz adnotację Pen Add przy zdarzeniu kliknięcia autorstwa plotly (@plotly) w CodePen.

#5 – Frappe

Biblioteka wykresów Frappe jest tworzona przez ludzi, którzy stworzyli Frappe Framework. Ta biblioteka jest tak prosta, jak to tylko możliwe. A ta prostota jest głównym czynnikiem wpływającym na popularność biblioteki.

Biblioteka nie wymaga żadnych zewnętrznych zależności i może renderować przyjazne dla urządzeń mobilnych wykresy SVG w zaledwie kilku linijkach kodu. Oto przykład kodu dla podstawowego wykresu osi:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

A ten mały fragment można przełożyć na wykres taki:

Dostępna jest również obsługa wykresów mieszanych (wiele wykresów w jednym), adnotacji, map termicznych, a interfejs API jest dostępny, jeśli planujesz aktualizować dane w czasie rzeczywistym lub je eksportować.

Przykład Frappe

Zobacz Pen Frappe Hello World autorstwa Jang Rush (@weakish) na CodePen.

#6 – Wykresy Apex

ApexCharts to bardzo tradycyjna biblioteka wykresów. Główną różnicą między ApexCharts i Frappe (na przykład) jest to, że ApexCharts udostępnia nieco więcej wersji demonstracyjnych. Ale także oferuje natywne wsparcie dla popularnych frameworków, takich jak React, Vue i Angular. Oznacza to również, że wszystkie wykresy demonstracyjne mają swoje próbki zapisane w składni wspomnianych frameworków.

Jeśli chodzi o funkcje, wszystkie wykresy są generowane w formacie SVG i domyślnie są przyjazne dla urządzeń mobilnych. Możesz także skorzystać z funkcji, takich jak płynne animacje i adnotacje, oraz dostosować paletę motywów wykresu, wybierając jeden z 10 przykładowych stylów.

Przykład wykresu Apex

Zobacz Pen Realtime Dashboard firmy ApexCharts (@apexcharts) na CodePen.

#7 – G2

Ostatnio mówiłem o Ant Design przy kilku okazjach, w tym w moich artykułach o bibliotekach komponentów dla React.js i Vue. Ant jest nie tylko niezwykle popularny w serwisie GitHub, ale także uwielbiają go społeczności we wszystkich regionach świata.

A biblioteka wykresów G2 (lub jak ją nazywają „Gramatyka wizualizacji”) to implementacja systemu wykresów Ant Design przy użyciu Ant Design System. Gorąco polecam zajrzeć na stronę główną AntV, gdzie znajdziesz wiele innych bibliotek związanych z wizualizacją danych w czasie rzeczywistym.

Jest najczęściej używany do budowania takich rzeczy jak pulpity administracyjne, tworzenia ścieżek danych i tworzenia interaktywnych przykładów wizualizacji danych za pomocą silnika renderującego. Ten silnik może renderować wykresy i wektory danych za pomocą WebGL, Canvas i SVG. A ponieważ biblioteka jest podłączana, możesz jeszcze bardziej ulepszyć prezentacje wykresów dzięki bardziej niezawodnym bibliotekom, takim jak D3.js (które widzieliśmy wcześniej).

#8 – szorstkiViz

Biblioteka roughViz od Jareda Wilbera to połączenie 3 różnych bibliotek: D3.js, Rough.js i handy – ręcznie rysowany procesor szkicu. Jak widać z przykładowego zrzutu ekranu powyżej, nie jest to typowa biblioteka wykresów. roughViz został zbudowany całkowicie w celu pomocy w tworzeniu ręcznie rysowanych wykresów w stylu szkicu za pomocą JavaScript.

Tego typu biblioteka będzie świetnym dodatkiem do osobistych projektów, innymi słowy – projektów, które wymagają bardziej kreatywnej iskry niż tradycyjne podejście w profesjonalnym stylu. A sama składnia jest tak prosta, jak to tylko możliwe, bardzo zgodna z takimi jak Frappe i ApexCharts.

Możesz się o tym przekonać w poniższym demo.

RoughViz Przykład

Zobacz demo Pen RoughViz autorstwa Danny'ego Englishby'ego (@DanEnglishby) na CodePen.

#9 – Lekkie wykresy

Jeśli pracujesz nad projektem związanym z finansami (lub kryptowalutą, jeśli o to chodzi), jest całkiem jasne, że wiele z wcześniej wspomnianych bibliotek wykresów po prostu tego nie wytnie. W związku z tym oto Lightweight Charts – biblioteka wykresów stworzona specjalnie do wyświetlania wykresów i wykresów opartych na finansach.

Ta biblioteka jest nie tylko open-source i lekka, ale także zawiera wszystkie niezbędne funkcje, które byłyby wymagane do wyświetlania danych wykresów dotyczących finansów i ich dynamicznej struktury.

Jedną z tych funkcji jest przesyłanie strumieniowe danych, które umożliwia przekazywanie danych w czasie rzeczywistym do płótna, a następnie aktualizowanie ich bez konieczności odświeżania strony przez użytkownika. Kolejnym czynnikiem, który możesz wziąć pod uwagę, jest wydajność, która nie powinna stanowić problemu, jak wyjaśniono na stronie głównej tej biblioteki.

„Nasze rozwiązania do tworzenia wykresów zostały od początku zaprojektowane do pracy z ogromnymi macierzami danych. Wykresy pozostają responsywne i elastyczne, nawet z tysiącami słupków, nawet przy aktualizacjach wiele razy na sekundę z nowymi tikami.”

Sprawdź poniższe demo, aby poczuć to, ale także wiele opcji i funkcji wykresów.

Przykład lekkich wykresów

Zobacz zaawansowany wykres Pen tradingview autorstwa truong (@truong160196) na CodePen.

Lekkie wykresy Dodatkowe zasoby

• Wykresy finansowe dla Twojej aplikacji

#10 – Billboard

Billboard to biblioteka wykresów interfejsu oparta na D3. Posiada wszystkie nowoczesne funkcje, jakich można oczekiwać – renderowanie SVG, obsługę dotykową dla urządzeń mobilnych, prosty interfejs i świetną dokumentację API.

Jednak moją ulubioną cechą, a prawdopodobnie także dla wielu innych, jest to, że Billboard zawiera ponad 230 przykładów wykresów, które możesz stworzyć za pomocą tej biblioteki. Te przykłady są podzielone na kategorie wykresów, takie jak Podstawowe, Oś, Dane, Siatka, Interakcja, Region i wiele innych.

Oznacza to, że możesz nie tylko znaleźć odpowiedni typ wykresu dla swojego projektu i jego wymagań, ale także zbadać inne opcje i sprawdzić, czy konkretny przykład przykuwa Twoją uwagę.

Przykład Billboard.js

Zobacz żądania wykresu pisakowego – Billboard.js autorstwa DTCC (@dtcc) na CodePen.

#11 – Perspektywa

Perspective jest jednym z projektów, które obsługuje FINOS (Open-Source Fintech), a sam FINOS jest również częścią Linux Foundation. Podobnie jak Lightweight Charts – Perspective.js jest zorientowany na dostarczanie rozwiązań wykresów dla projektów finansowych. Jest jednak zdolny do znacznie więcej i widzi częste zastosowanie w projektach związanych z eCommerce, siatkami danych i segmentacją przesyłek.

Jeśli kiedykolwiek widziałeś wykresy dotyczące Covid-19, lotnisk i głównych wydarzeń sportowych, takich jak igrzyska olimpijskie, istnieje duża szansa, że ​​integracja interfejsu i strumienia danych została wykonana z perspektywą. Posiada bogaty interfejs użytkownika, zoptymalizowany pod kątem strumieni danych i złożonej analizy w czasie rzeczywistym.

Jest dostępny dla programistów JavaScript i Python i używa komponentu sieci Web Custom Elements.

#12 – Wykres UI tostowania

Jeśli już, to biblioteka wykresów Toast UI to kolejny wybór do rozważenia, jeśli chodzi o style wykresów i ich projekt. Funkcjonalność tutaj jest bardzo podobna do bibliotek, którym już się przyjrzeliśmy.

Myślę, że obszarem, w którym Toast UI różni się od innych opcji, jest specyfikacja API. Jest to prawdopodobnie jeden z lepszych interfejsów API, które możesz zdobyć, i zawiera bezpłatną, szczegółową dokumentację. Jedną z funkcji interfejsu API jest Instances , umożliwiająca dynamiczną zmianę danych wykresu z powodu zmiany źródła danych lub z powodu danych wprowadzonych przez użytkownika.

Obsługiwane przez Toast typy wykresów obejmują słupki, kolumny, linie, obszary, bąbelki, mapy drzew, radary, słupki promieniowe i inne. Preferowanym sposobem korzystania z tej biblioteki jest npm, ale dostępna jest sieć CDN, a wszystko, co musisz zrobić, to określić kontener div id="chart" dla miejsca, w którym chcesz wyświetlić wykres.

#13 – Rechart

Jeśli pracujesz głównie z React.js, biblioteka Recharts jest zbudowana na bazie D3.js z React. Respektuje natywną architekturę komponentów React.js, a wykresy utworzone za pomocą Recharts można oddzielić i ponownie wykorzystać jako pojedyncze komponenty na wymaganych stronach.

Wszystkie przykłady wykresów mają wstępnie napisaną strukturę komponentów na wypadek, gdybyś chciał je wypróbować w istniejącym projekcie. Biblioteka została wydana po raz pierwszy w 2016 roku, ale wciąż jest aktywnie rozwijana.

Przykład Rechart

Zobacz Pen ReCharts autorstwa binu (@binutomy) na CodePen.