Istnieje sporo bibliotek JavaScript do kreślenia różnych wykresów, od wykresów słupkowych po wykresy liniowe i wiele innych. Jeśli uczysz się, jak dynamicznie wyświetlać dane w swojej witrynie za pomocą JavaScript, Chart.js jest jedną z takich bibliotek, którą powinieneś wypróbować.

Jak zacząć tworzyć wizualizacje danych za pomocą Chart.js? Dowiesz się jak w tym artykule.

Zacznijmy.

Co to jest Chart.js?

Chart.js to biblioteka JavaScript do wizualizacji danych typu open source, używana do tworzenia wykresów renderowanych w formacie HTML. Obecnie obsługuje osiem różnych typów wykresów interaktywnych, które można również animować. Aby utworzyć wykres oparty na HTML za pomocą chart.js, potrzebujesz kanwy HTML do jego przechowywania.

Biblioteka akceptuje zestaw zestawów danych i innych parametrów dostosowywania, takich jak kolor tła, kolor obramowania i inne. Jednym z zestawów danych jest etykieta, który reprezentuje wartości na osi X. Drugi to zestaw wartości liczbowych, które zwykle leżą na osi Y.

Należy również określić typ wykresu w obiekcie wykresu, aby biblioteka wiedziała, który wykres ma zostać wykreślony.

Jak tworzyć wykresy za pomocą Chart.js

Jak wspomnieliśmy wcześniej, możesz tworzyć różne rodzaje wykresów za pomocą chart.js. W tym samouczku zaczniesz od wykresów liniowych i słupkowych. Gdy zrozumiesz koncepcję, która się za nimi kryje, będziesz mieć wszystkie narzędzia i pewność, których potrzebujesz, aby wykreślić inne dostępne wykresy.

Związane z:Jak sprawić, by Twoja witryna była responsywna i interaktywna dzięki CSS i JavaScript?

Aby zacząć używać chart.js, utwórz niezbędne pliki. W tym samouczku nazwy plików to wykres.html, plot.js, oraz index.css. Możesz użyć dowolnej konwencji nazewnictwa dla swoich plików.

Teraz wklej następujące elementy w głowa w pliku HTML, aby utworzyć link do sieci dostarczania treści Chart.js (CDN).

w wykres.html:

src= https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Następnie utwórz płótno HTML do przechowywania wykresu i nadaj mu ID. Połącz się również z plikiem CSS (index.css) w głowa i wskaż swój plik JavaScript (plot.js) w sekcji ciało Sekcja.

Struktura pliku HTML wygląda tak:

 Wykresy

I w twoim CSS:

ciało{
 kolor tła:#383735;
}
h1{
 kolor:#e9f0e9;
 margines lewy: 43%;
}
#działki{
 margines: auto;
 kolor tła: #2e2d2d;
}

Powyższy styl CSS nie jest ustaloną konwencją. Możesz więc stylizować swoje, jak chcesz, w zależności od struktury DOM. Gdy Twoje pliki HTML i CSS będą gotowe, nadszedł czas na kreślenie wykresów za pomocą JavaScript.

Wykres liniowy

Aby utworzyć wykres liniowy z chart.js, ty ustawisz wykres rodzaj do linia. Dzięki temu biblioteka ma narysować wykres liniowy.

Aby to zademonstrować, w swoim pliku JavaScript:

// Pobierz płótno HTML według jego identyfikatora
wykresy = document.getElementById("wykresy");
// Przykładowe zbiory danych dla osi X i Y
var months = ["sty", "lut", "mar", "kwiecień", "maj", "czer", "lip"]; //Pozostaje na osi X
var ruch = [65, 59, 80, 81, 56, 55, 60] //Pozostaje na osi Y
// Utwórz instancję obiektu Chart:
nowy wykres (działki, {
 wpisz: 'linia', //Zadeklaruj typ wykresu
 dane: {
 etykiety: miesiące, //Dane osi X
 zbiory danych: [{
 dane: ruch, //Dane osi Y
 kolor tła: '#5e440f',
 kolor obramowania: 'biały',
 wypełnienie: fałszywe, //Wypełnia krzywą pod linią kolorem tła. To domyślnie prawda
 }]
 },
});

Wyjście:

Zapraszam do zmiany wypełnić wartość do prawda, użyj większej ilości danych lub dostosuj kolory, aby zobaczyć, co się stanie.

Jak widać, na górze wykresu znajduje się małe pole legendy. Możesz usunąć to w opcjonalnym opcje parametr.

ten opcje Parametr pomaga również w innych dostosowaniach oprócz usuwania lub dołączania legendy. Na przykład możesz go użyć, aby wymusić rozpoczęcie osi od zera.

Aby zadeklarować opcje parametr, oto jak wygląda sekcja wykresu w pliku JavaScript:

// Utwórz instancję obiektu Chart:
nowy wykres (działki, {
 wpisz: 'linia', //Zadeklaruj typ wykresu
 dane: {
 etykiety: miesiące, //Dane osi X
 zbiory danych: [{
 dane: ruch, //Dane osi Y
 kolor tła: '#5e440f', //Kolor kropek
 kolor obramowania: 'biały', //Kolor linii
 wypełnienie: fałszywe, //Wypełnia krzywą pod linią kolorem tła. To domyślnie prawda
 }]
 },
 //Określ opcje niestandardowe:
 opcje:{
 legenda: {display: false}, //Usuń pole legendy, ustawiając je na false. To domyślnie prawda.
//Określ ustawienia wag. Na przykład, aby oś Y zaczynała się od zera:
 waga:{
 Osie y: [{ticks: {min: 0}}] //To samo można powtórzyć dla osi X, jeśli zawiera liczby całkowite.
 }
 } 
});

Wyjście:

Możesz także użyć różnych kolorów tła dla każdej kropki. Zróżnicowanie kolorów tła w ten sposób jest jednak zwykle bardziej pomocne w przypadku wykresów słupkowych.

Tworzenie wykresów słupkowych za pomocą Chart.js

Tutaj wystarczy zmienić wykres rodzaj do bar. Nie musisz ustawiać wypełnić opcja, ponieważ paski automatycznie dziedziczą kolor tła:

// Utwórz instancję obiektu Chart:
nowy wykres (działki, {
 typ: 'bar', //Zadeklaruj typ wykresu
 dane: {
 etykiety: miesiące, //Dane osi X
 zbiory danych: [{
 dane: ruch, //Dane osi Y
 kolor tła: '#3bf70c', //Kolor pasków
 }]
 },
 opcje:{
 legenda: {display: false}, //Usuń pole legendy, ustawiając je na false. To domyślnie prawda.
 }
});

Wyjście:

Możesz zmusić oś Y do rozpoczęcia od zera lub dowolnej wartości, tak jak w przypadku wykresu liniowego.

Związane z:Metody tablic JavaScript, które powinieneś opanować

Aby użyć różnych kolorów dla każdego paska, przekaż tablicę kolorów pasującą do liczby elementów w danych do kolor tła parametr:

// Utwórz instancję obiektu Chart:
nowy wykres (działki, {
 typ: 'bar', //Zadeklaruj typ wykresu
 dane: {
 etykiety: miesiące, //Dane osi X
 zbiory danych: [{
 dane: ruch, //Dane osi Y
//Kolor każdego słupka:
 kolor tła: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 „rgb (17, 252, 5)”],
 }]
 },
 opcje:{
 legenda: {display: false}, //Usuń pole legendy, ustawiając je na false. To domyślnie prawda.
 }
});

Wyjście:

Tworzenie wykresu kołowego za pomocą Chart.js

Aby narysować wykres kołowy, zmień typ wykresu na ciasto. Możesz także ustawić wyświetlanie legendy na prawda aby zobaczyć, co reprezentuje każdy segment tortu:

// Utwórz instancję obiektu Chart:
nowy wykres (działki, {
 type: 'pie', //Zadeklaruj typ wykresu
 dane: {
 etykiety: miesiące, //Określa każdy segment
 zbiory danych: [{
 dane: ruch, //określa rozmiar segmentu
 //Kolor każdego segmentu
 kolor tła: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 „rgb (17, 252, 5)”],
 }]
 },
 opcje:{
 legenda: {display: true}, //Domyślnie jest to prawda.
}
});

Wyjście:

Tak jak w powyższych przykładach, możesz wypróbować inne wykresy, zmieniając rodzaj.

Niemniej jednak, oto lista obsługiwanych chart.js typy wykresów, które możesz wypróbować, korzystając z powyższych konwencji kodowania:

• bar
• linia
• rozpraszać
• pączek
• ciasto
• radar
• obszar polarny
• bańka

Baw się z Chart.js

Chociaż w tym samouczku zajęliście się tylko wykresami liniowymi, kołowymi i słupkowymi, wzorzec kodu do wykreślania innych wykresów za pomocą chart.js jest zgodny z tą samą konwencją. Więc nie krępuj się bawić z innymi.

Mając to na uwadze, jeśli chcesz więcej niż to, co oferuje chart.js, możesz również przyjrzeć się innym bibliotekom wykresów JavaScript.

6 frameworków JavaScript, których warto się nauczyć

Istnieje wiele frameworków JavaScript, które pomagają w rozwoju. Oto kilka, które powinieneś wiedzieć.

Czytaj dalej

O autorze