Obstaja kar nekaj knjižnic JavaScript za risanje različnih grafikonov, od paličnih do črtnih grafikonov in še več. Če se naučite dinamičnega prikazovanja podatkov na vašem spletnem mestu z JavaScriptom, je Chart.js ena takšnih knjižnic, ki bi jo morali preizkusiti.

Kako lahko začnete ustvarjati vizualizacije podatkov s Chart.js? V tem članku boste izvedeli, kako.

Začnimo.

Kaj je Chart.js?

Chart.js je odprtokodna knjižnica JavaScript za vizualizacijo podatkov, ki se uporablja za risanje grafikonov, ki jih je mogoče upodabljati v HTML. Trenutno podpira osem različnih vrst interaktivnih kart, ki jih lahko tudi animirate. Če želite ustvariti graf, ki temelji na HTML-ju, z chart.js potrebujete platno HTML, ki ga drži.

Knjižnica sprejema niz podatkovnih nizov in drugih parametrov prilagajanja, kot so barva ozadja, barva obrobe in drugo. Eden od naborov podatkov je etiketo, ki predstavlja vrednosti na osi X. Drugi je niz številčnih vrednosti, ki običajno ležijo na osi Y.

Prav tako morate določiti vrsto grafa znotraj predmeta grafikona, da knjižnica ve, kateri graf naj nariše.

Kako ustvariti grafikone z Chart.js

Kot smo že omenili, lahko z njimi ustvarite različne vrste grafikonov chart.js. Za to vadnico boste začeli s črtnimi in paličnimi grafi. Ko boste razumeli koncept za temi, boste imeli vsa orodja in samozavest, ki jih potrebujete za risanje drugih razpoložljivih grafikonov.

Povezano:Kako narediti vaše spletno mesto odzivno in interaktivno s CSS in JavaScript

Za začetek uporabe chart.js, ustvarite potrebne datoteke. Za to vadnico so imena datotek chart.html, plot.js, in index.css. Za svoje datoteke lahko uporabite katero koli konvencijo o poimenovanju.

Zdaj prilepite naslednje v glavo razdelku vaše datoteke HTML za povezavo do omrežja za dostavo vsebine Chart.js (CDN).

V chart.html:

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

Nato ustvarite platno HTML, ki bo držalo vaš grafikon in mu dajte ID. Povežite se tudi z datoteko CSS (index.css) v glavo in pokažite na vašo datoteko JavaScript (plot.js) v telo oddelek.

Struktura datoteke HTML je videti takole:

 grafikoni

In v vašem CSS:

telo{
 barva ozadja:#383735;
}
h1{
 barva:#e9f0e9;
 margin-left: 43 %;
}
#plots{
 marža: samodejno;
 barva ozadja: #2e2d2d;
}

Zgornji slog CSS ni nastavljena konvencija. Tako lahko svoje oblikujete, kot želite, odvisno od vaše strukture DOM. Ko so vaše datoteke HTML in CSS pripravljene, je čas, da svoje grafikone narišete z JavaScriptom.

Črtni grafikon

Za izdelavo črtnega grafikona z chart.js, nastavili boste grafikon tip do vrstico. To pove knjižnici, naj nariše črtni grafikon.

Če želite to pokazati, v svoji datoteki JavaScript:

// Pridobite platno HTML po njegovem id
plos = document.getElementById("plots");
// Primeri podatkovnih nizov za osi X in Y
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //Ostane na osi X
var promet = [65, 59, 80, 81, 56, 55, 60] //Ostane na Y-osi
// Ustvari primerek predmeta Chart:
nov grafikon (grafe, {
 tip: 'vrstica', // Razglasite vrsto grafikona
 podatki: {
 oznake: meseci, //Podatki osi X
 nabori podatkov: [{
 podatki: promet, //Podatki osi Y
 Barva ozadja: '#5e440f',
 barva obrobe: 'bela',
 izpolni: false, // Zapolni krivuljo pod črto z barvo ozadja. Privzeto je res
 }]
 },
});

Izhod:

Prosto spremenite napolniti vrednost do prav, uporabite več podatkov ali prilagodite barve, da vidite, kaj se zgodi.

Kot lahko tudi vidite, je na vrhu grafikona majhno polje z legendo. To lahko odstranite znotraj neobveznega opcije parameter.

The opcije parameter poleg odstranitve ali vključitve legende pomaga tudi pri drugih prilagoditvah. Na primer, z njim lahko prisilite, da se os začne pri nič.

Za razglasitev an opcije parameter, tukaj je videti razdelek grafikona v vaši datoteki JavaScript:

// Ustvari primerek predmeta Chart:
nov grafikon (grafe, {
 tip: 'vrstica', // Razglasite vrsto grafikona
 podatki: {
 oznake: meseci, //Podatki osi X
 nabori podatkov: [{
 podatki: promet, //Podatki osi Y
 Barva ozadja: '#5e440f', // Barva pik
 barva obrobe: 'bela', // Barva črte
 izpolni: false, // Zapolni krivuljo pod črto z barvo ozadja. Privzeto je res
 }]
 },
 //Določite možnosti po meri:
 opcije:{
 legenda: {display: false}, // Odstranite polje z legendo tako, da ga nastavite na false. Privzeto je res.
//Določite nastavitve za tehtnice. Na primer, da se os Y začne od nič:
 tehtnice:{
 yOsi: [{tiki: {min: 0}}] // Enako lahko ponovite za os X, če vsebuje cela števila.
 }
 } 
});

Izhod:

Za vsako piko lahko uporabite tudi različne barve ozadja. Spreminjanje barv ozadja na ta način je običajno bolj koristno pri paličnih grafih.

Izdelava paličnih grafov z Chart.js

Tukaj morate samo spremeniti grafikon tip do bar. Ni vam treba nastaviti napolniti možnost, ker palice samodejno podedujejo barvo ozadja:

// Ustvari primerek predmeta Chart:
nov grafikon (grafe, {
 vrsta: 'bar', // Razglasite vrsto grafikona
 podatki: {
 oznake: meseci, //Podatki osi X
 nabori podatkov: [{
 podatki: promet, //Podatki osi Y
 Barva ozadja: '#3bf70c', //Barva palic
 }]
 },
 opcije:{
 legenda: {display: false}, // Odstranite polje z legendo tako, da ga nastavite na false. Privzeto je res.
 }
});

Izhod:

Lahko prisilite, da se os Y začne od nič ali katere koli vrednosti, kot ste to storili za črtni grafikon.

Povezano:Metode matrike JavaScript, ki jih morate obvladati

Če želite uporabiti različne barve za vsako vrstico, vnesite niz barv, ki se ujemajo s številom elementov v vaših podatkih Barva ozadja parameter:

// Ustvari primerek predmeta Chart:
nov grafikon (grafe, {
 vrsta: 'bar', // Razglasite vrsto grafikona
 podatki: {
 oznake: meseci, //Podatki osi X
 nabori podatkov: [{
 podatki: promet, //Podatki osi Y
// Barva vsake vrstice:
 Barva ozadja: [
 "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}, // Odstranite polje z legendo tako, da ga nastavite na false. Privzeto je res.
 }
});

Izhod:

Izdelava tortnega grafikona z Chart.js

Če želite narisati tortni grafikon, spremenite vrsto grafikona v pita. Morda boste želeli nastaviti tudi prikaz legende na prav da vidite, kaj vsak segment pite predstavlja:

// Ustvari primerek predmeta Chart:
nov grafikon (grafe, {
 type: 'pie', //Deklariraj vrsto grafikona
 podatki: {
 oznake: meseci, //opredeljuje vsak segment
 nabori podatkov: [{
 podatki: promet, //Določi velikost segmenta
 // Barva vsakega segmenta
 Barva ozadja: [
 "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:{
 legend: {display: true}, //To je privzeto res.
}
});

Izhod:

Kot ste storili v zgornjih primerih, lahko preizkusite druge grafikone tako, da spremenite tip.

Kljub temu je tukaj seznam podprtih chart.js vrste grafikonov, ki jih lahko preizkusite z uporabo zgornjih konvencij kodiranja:

• bar
• vrstico
• razpršiti
• krof
• pita
• radar
• polarArea
• mehurček

Igrajte se z Chart.js

Čeprav ste se v tej vadnici naučili le črtnih, tortnih in paličnih grafov, je kodni vzorec za risanje drugih grafikonov z chart.js enak dogovoru. Zato se lahko igrajte tudi z drugimi.

Glede na to, če želite več kot ponuja chart.js, si boste morda želeli ogledati tudi nekatere druge knjižnice grafikonov JavaScript.

6 JavaScript okvirjev, vrednih učenja

Obstaja veliko ogrodij JavaScript, ki pomagajo pri razvoju. Tukaj je nekaj, kar bi morali vedeti.

Preberite Naprej

O avtorju