Postoji prilično nekoliko JavaScript knjižnica za crtanje raznih grafikona, u rasponu od stupčastih do linijskih grafikona i još mnogo toga. Ako učite kako dinamički prikazati podatke na svojoj web stranici pomoću JavaScripta, Chart.js je jedna takva biblioteka koju biste trebali isprobati.

Kako možete početi stvarati vizualizacije podataka s Chart.js? Naučit ćete kako u ovom članku.

Započnimo.

Što je Chart.js?

Chart.js je JavaScript biblioteka za vizualizaciju podataka otvorenog koda koja se koristi za crtanje grafikona koji se mogu prikazati u HTML-u. Trenutno podržava osam različitih vrsta interaktivnih karata koje također možete animirati. Da biste napravili HTML-temeljen grafikon s chart.jsom, potrebno vam je HTML platno da ga držite.

Knjižnica prihvaća skup skupova podataka i drugih parametara prilagodbe kao što su boja pozadine, boja obruba i još mnogo toga. Jedan od skupova podataka je označiti, što predstavlja vrijednosti na X-osi. Drugi je skup brojčanih vrijednosti, koje obično leže na Y-osi.

Također morate navesti vrstu grafikona unutar objekta grafikona kako bi knjižnica znala koji graf treba iscrtati.

Kako stvoriti grafikone s Chart.js

Kao što smo već spomenuli, pomoću njih možete kreirati različite vrste grafikona chart.js. Za ovaj vodič počet ćete s linijskim i stupčastim grafikonima. Nakon što shvatite koncept koji stoji iza njih, imat ćete sve alate i samopouzdanje koji su vam potrebni za crtanje ostalih dostupnih grafikona.

Povezano:Kako svoju web stranicu učiniti responzivnom i interaktivnom uz CSS i JavaScript

Za početak korištenja chart.js, stvorite potrebne datoteke. Za ovaj vodič, nazivi datoteka su grafikon.html, plot.js, i index.css. Možete koristiti bilo koju konvenciju imenovanja za svoje datoteke.

Sada zalijepite sljedeće u glava odjeljak vaše HTML datoteke za povezivanje s Chart.js mrežom za isporuku sadržaja (CDN).

U grafikon.html:

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

Zatim stvorite HTML platno za držanje vašeg grafikona i dajte mu iskaznica. Također, povežite se s CSS (index.css) datotekom u glava odjeljak i pokažite na vašu JavaScript (plot.js) datoteku u tijelo odjeljak.

Struktura HTML datoteke izgleda ovako:

 grafikoni

I u vašem CSS:

tijelo{
 background-color:#383735;
}
h1{
 boja:#e9f0e9;
 margin-lijevo: 43%;
}
#plots{
 margina: auto;
 boja pozadine: #2e2d2d;
}

Gornji CSS stil nije skup konvencija. Dakle, možete stilizirati svoj kako želite ovisno o vašoj DOM strukturi. Kada su vaše HTML i CSS datoteke spremne, vrijeme je da iscrtate svoje grafikone pomoću JavaScripta.

Linijski grafikon

Za izradu linijskog grafikona s chart.js, vi ćete postaviti grafikon tip do crta. To govori knjižnici da nacrta linijski grafikon.

Da biste to demonstrirali, u svojoj JavaScript datoteci:

// Dobiti HTML platno po njegovom ID-u
plots = document.getElementById("plots");
// Primjer skupova podataka za X i Y-os
var months = ["siječanj", "veljača", "ožujak", "travanj", "svibanj", "lipanj", "srpanj"]; //Ostaje na X-osi
var promet = [65, 59, 80, 81, 56, 55, 60] //Ostaje na Y-osi
// Kreirajte instancu Chart objekta:
novi grafikon (ploče, {
 upišite: 'linija', //Deklarirajte vrstu grafikona
 podaci: {
 oznake: mjeseci, //Podaci osi X
 skupovi podataka: [{
 podaci: promet, // Podaci osi Y
 boja pozadine: '#5e440f',
 Boja obruba: 'bijela',
 ispuni: lažno, //Ispunjava krivulju ispod crte bojom pozadine. Istina je prema zadanim postavkama
 }]
 },
});

Izlaz:

Slobodno promijenite ispuniti vrijednost za pravi, upotrijebite više podataka, ili prilagodite boje da vidite što se događa.

Kao što također možete vidjeti, postoji mali okvir legende na vrhu grafikona. To možete ukloniti unutar opcionalnog opcije parametar.

The opcije parametar također pomaže kod drugih prilagodbi osim uklanjanja ili uključivanja legende. Na primjer, možete ga koristiti da prisilite os da počne od nule.

Da proglasi an opcije parametar, evo kako izgleda odjeljak grafikona u vašoj JavaScript datoteci:

// Kreirajte instancu Chart objekta:
novi grafikon (ploče, {
 upišite: 'linija', //Deklarirajte vrstu grafikona
 podaci: {
 oznake: mjeseci, //Podaci osi X
 skupovi podataka: [{
 podaci: promet, // Podaci osi Y
 boja pozadine: '#5e440f', //Boja točkica
 Boja obruba: 'bijela', //Boja linije
 ispuni: lažno, //Ispunjava krivulju ispod crte bojom pozadine. Istina je prema zadanim postavkama
 }]
 },
 //Navedite prilagođene opcije:
 opcije:{
 legenda: {display: false}, //Uklonite okvir legende tako što ćete ga postaviti na false. Istina je prema zadanim postavkama.
//Odredite postavke za vagu. Na primjer, da os Y počne od nule:
 vaga:{
 yAxes: [{ticks: {min: 0}}] //Možete ponoviti isto za X-os ako sadrži cijele brojeve.
 }
 } 
});

Izlaz:

Također možete koristiti različite boje pozadine za svaku točku. Međutim, mijenjanje boja pozadine na ovaj način obično je korisnije s trakastim grafikonima.

Izrada trakastih grafova pomoću Chart.js

Ovdje trebate samo promijeniti grafikon tip do bar. Ne morate postavljati ispuniti opcija jer trake automatski nasljeđuju boju pozadine:

// Kreirajte instancu Chart objekta:
novi grafikon (ploče, {
 upišite: 'bar', //Deklarirajte vrstu grafikona
 podaci: {
 oznake: mjeseci, //Podaci osi X
 skupovi podataka: [{
 podaci: promet, // Podaci osi Y
 boja pozadine: '#3bf70c', //Boja šipki
 }]
 },
 opcije:{
 legenda: {display: false}, //Uklonite okvir legende tako što ćete ga postaviti na false. Istina je prema zadanim postavkama.
 }
});

Izlaz:

Slobodno natjerajte os Y da počne od nule ili bilo koje vrijednosti kao što ste učinili za linijski grafikon.

Povezano:Metode JavaScript polja koje trebate ovladati

Da biste koristili različite boje za svaku traku, proslijedite niz boja koje odgovaraju broju stavki u vašim podacima u boja pozadine parametar:

// Kreirajte instancu Chart objekta:
novi grafikon (ploče, {
 upišite: 'bar', //Deklarirajte vrstu grafikona
 podaci: {
 oznake: mjeseci, //Podaci osi X
 skupovi podataka: [{
 podaci: promet, // Podaci osi Y
//Boja svake trake:
 boja pozadine: [
 "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)"],
 }]
 },
 opcije:{
 legenda: {display: false}, //Uklonite okvir legende tako što ćete ga postaviti na false. Istina je prema zadanim postavkama.
 }
});

Izlaz:

Izrada tortnog grafikona s Chart.js

Da biste nacrtali tortni grafikon, promijenite vrstu grafikona u pita. Možda biste željeli postaviti i prikaz legende na pravi da vidite što svaki segment kolača predstavlja:

// Kreirajte instancu Chart objekta:
novi grafikon (ploče, {
 type: 'pie', //Deklarirajte vrstu grafikona
 podaci: {
 oznake: mjeseci, //Definira svaki segment
 skupovi podataka: [{
 podaci: promet, //Određuje veličinu segmenta
 //Boja svakog segmenta
 boja pozadine: [
 "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)"],
 }]
 },
 opcije:{
 legenda: {display: true}, //Ovo je istina prema zadanim postavkama.
}
});

Izlaz:

Kao što ste učinili u gornjim primjerima, možete isprobati druge grafikone promjenom tip.

Ipak, evo popisa podržanih chart.js vrste grafikona koje možete isprobati koristeći gore navedene konvencije kodiranja:

• bar
• crta
• raspršiti
• krafna
• pita
• radar
• polarArea
• mjehurić

Igrajte se s Chart.js

Iako ste se u ovom vodiču samo dočepali linijskih, tortnih i stupčastih grafikona, uzorak koda za crtanje drugih grafikona s chart.js slijedi istu konvenciju. Stoga se slobodno poigrajte i s ostalima.

Uz to, ako želite više od onoga što chart.js nudi, možda biste željeli pogledati i neke druge JavaScript biblioteke grafikona.

6 JavaScript okvira koje vrijedi naučiti

Postoji mnogo JavaScript okvira koji pomažu u razvoju. Evo nekih koje biste trebali znati.

Pročitajte dalje

O autoru