Există câteva biblioteci JavaScript pentru trasarea diferitelor diagrame, de la grafice cu bare la diagrame cu linii și multe altele. Dacă învățați cum să afișați dinamic datele pe site-ul dvs. cu JavaScript, Chart.js este una dintre aceste biblioteci pe care ar trebui să o încercați.

Cum puteți începe să creați vizualizări de date cu Chart.js? Veți afla cum în acest articol.

Să începem.

Ce este Chart.js?

Chart.js este o bibliotecă JavaScript de vizualizare a datelor cu sursă deschisă folosită pentru a reprezenta diagrame care pot fi redate în HTML. În prezent, acceptă opt tipuri diferite de diagrame interactive pe care, de asemenea, le puteți anima. Pentru a realiza un grafic bazat pe HTML cu chart.js, aveți nevoie de o pânză HTML pentru a-l ține.

Biblioteca acceptă un set de seturi de date și alți parametri de personalizare, cum ar fi culoarea de fundal, culoarea chenarului și altele. Unul dintre seturile de date este eticheta, care reprezintă valorile pe axa X. Celălalt este un set de valori numerice, care se află de obicei pe axa Y.

De asemenea, trebuie să specificați tipul de grafic în cadrul obiectului diagramă, astfel încât biblioteca să știe ce grafic trebuie reprezentat.

Cum se creează diagrame cu Chart.js

După cum am menționat anterior, puteți crea diferite tipuri de diagrame cu ajutorul chart.js. Pentru acest tutorial, veți începe cu grafice cu linii și bare. Odată ce înțelegeți conceptul din spatele acestora, veți avea toate instrumentele și încrederea de care aveți nevoie pentru a trasa celelalte diagrame disponibile.

Legate de:Cum să vă faceți site-ul web receptiv și interactiv cu CSS și JavaScript

Pentru a începe să utilizați chart.js, creați fișierele necesare. Pentru acest tutorial, numele fișierelor sunt chart.html, plot.js, și index.css. Puteți utiliza orice convenție de denumire pentru fișierele dvs.

Acum, lipiți următoarele în cap secțiunea fișierului HTML pentru a face legătura la rețeaua de livrare de conținut (CDN) Chart.js.

În chart.html:

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

Apoi, creați o pânză HTML pentru a vă păstra diagrama și oferiți-i un ID. De asemenea, conectați-vă la fișierul CSS (index.css) din fișierul cap secțiunea și indicați fișierul dvs. JavaScript (plot.js) în fișierul corp secțiune.

Structura fișierului HTML arată astfel:

 Diagrame

Și în tine CSS:

corp{
 culoare de fundal:#383735;
}
h1{
 culoare:#e9f0e9;
 marja-stânga: 43%;
}
#loturi{
 margine: auto;
 culoare de fundal: #2e2d2d;
}

Stilul CSS de mai sus nu este o convenție stabilită. Așa că le puteți stila după cum doriți, în funcție de structura DOM. Odată ce fișierele HTML și CSS sunt gata, este timpul să vă trasați diagramele cu JavaScript.

Diagrama de linii

Pentru a face o diagramă cu linii chart.js, vei seta graficul tip la linia. Aceasta îi spune bibliotecii să deseneze o diagramă cu linii.

Pentru a demonstra acest lucru, în fișierul JavaScript:

// Obțineți pânza HTML după id-ul său
plots = document.getElementById("plots");
// Exemple de seturi de date pentru axele X și Y
var luni = ["Ian", "Feb", "Mar", "Apr", "Mai", "Iun", "Iul"]; //Rămâne pe axa X
trafic var = [65, 59, 80, 81, 56, 55, 60] //Rămâne pe axa Y
// Creați o instanță a obiectului Chart:
diagramă nouă (parcele, {
 tip: „linie”, //Declară tipul diagramei
 date: {
 etichete: luni, //Date pe axa X
 seturi de date: [{
 date: trafic, //Date pe axa Y
 Culoare de fundal: „#5e440f”,
 borderColor: „alb”,
 umple: fals, //Umple curba de sub linie cu culoarea fundalului. Este adevărat implicit
 }]
 },
});

Ieșire:

Simțiți-vă liber să schimbați completati valoare pentru Adevărat, folosiți mai multe date sau modificați culorile pentru a vedea ce se întâmplă.

După cum puteți vedea de asemenea, există o mică casetă cu legendă în partea de sus a diagramei. Puteți elimina asta într-un opțional Opțiuni parametru.

The Opțiuni parametrul ajută și cu alte personalizări, în afară de eliminarea sau includerea legendei. De exemplu, îl puteți folosi pentru a forța o axă să înceapă de la zero.

A declara un Opțiuni parametru, iată cum arată secțiunea diagramă în fișierul JavaScript:

// Creați o instanță a obiectului Chart:
diagramă nouă (parcele, {
 tip: „linie”, //Declară tipul diagramei
 date: {
 etichete: luni, //Date pe axa X
 seturi de date: [{
 date: trafic, //Date pe axa Y
 Culoare de fundal: „#5e440f”, //Culoarea punctelor
 borderColor: „alb”, //Culoarea liniei
 umple: fals, //Umple curba de sub linie cu culoarea fundalului. Este adevărat implicit
 }]
 },
 //Specificați opțiuni personalizate:
 Opțiuni:{
 legenda: {afișare: fals}, //Elimină caseta cu legendă setând-o la false. Este adevărat implicit.
//Specificați setările pentru cântare. Pentru a face ca axa Y să înceapă de la zero, de exemplu:
 cântare:{
 yAxes: [{ticks: {min: 0}}] //Puteți repeta același lucru pentru axa X dacă conține numere întregi.
 }
 } 
});

Ieșire:

De asemenea, puteți utiliza diferite culori de fundal pentru fiecare punct. Varierea culorilor de fundal în acest fel este, de obicei, mai utilă cu graficele cu bare.

Realizarea de grafice cu bare cu Chart.js

Aici, trebuie doar să schimbați graficul tip la bar. Nu trebuie să setați completati opțiune deoarece barele moștenesc automat culoarea de fundal:

// Creați o instanță a obiectului Chart:
diagramă nouă (parcele, {
 tip: „bar”, //Declară tipul diagramei
 date: {
 etichete: luni, //Date pe axa X
 seturi de date: [{
 date: trafic, //Date pe axa Y
 Culoare de fundal: „#3bf70c”, //Culoarea barelor
 }]
 },
 Opțiuni:{
 legenda: {afișare: fals}, //Elimină caseta cu legendă setând-o la false. Este adevărat implicit.
 }
});

Ieșire:

Simțiți-vă liber să forțați axa Y să înceapă de la zero sau de la orice valoare, așa cum ați făcut pentru diagrama cu linii.

Legate de:Metode de matrice JavaScript pe care ar trebui să le stăpâniți

Pentru a utiliza culori diferite pentru fiecare bară, treceți o matrice de culori care se potrivesc cu numărul de elemente din datele dvs. în culoare de fundal parametru:

// Creați o instanță a obiectului Chart:
diagramă nouă (parcele, {
 tip: „bar”, //Declară tipul diagramei
 date: {
 etichete: luni, //Date pe axa X
 seturi de date: [{
 date: trafic, //Date pe axa Y
//Culoarea fiecărei bare:
 culoare de fundal: [
 „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)”],
 }]
 },
 Opțiuni:{
 legenda: {afișare: fals}, //Elimină caseta cu legendă setând-o la false. Este adevărat implicit.
 }
});

Ieșire:

Realizarea unei diagrame circulare cu Chart.js

Pentru a desena o diagramă circulară, schimbați tipul diagramei în plăcintă. De asemenea, este posibil să doriți să setați afișarea legendei la Adevărat pentru a vedea ce reprezintă fiecare segment al plăcintei:

// Creați o instanță a obiectului Chart:
diagramă nouă (parcele, {
 tip: „plăcintă”, //Declara tipul diagramei
 date: {
 etichete: luni, //Definește fiecare segment
 seturi de date: [{
 date: trafic, //Determină dimensiunea segmentului
 //Culoarea fiecărui segment
 culoare de fundal: [
 „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)”],
 }]
 },
 Opțiuni:{
 legenda: {display: true}, //Acest lucru este adevărat în mod implicit.
}
});

Ieșire:

Așa cum ați făcut în exemplele de mai sus, puteți încerca alte diagrame schimbând tip.

Cu toate acestea, iată o listă de suportate chart.js tipuri de diagrame pe care le puteți încerca folosind convențiile de codificare de mai sus:

• bar
• linia
• împrăștia
• gogoașă
• plăcintă
• radar
• zona polară
• bule

Joacă-te cu Chart.js

Deși v-ați pus mâna doar în jurul graficelor cu linie, plăcintă și bare în acest tutorial, modelul de cod pentru trasarea altor diagrame cu chart.js urmează aceeași convenție. Așa că simțiți-vă liber să vă jucați și cu ceilalți.

Acestea fiind spuse, dacă doriți mai mult decât ceea ce oferă chart.js, poate doriți să aruncați o privire și la alte biblioteci de diagrame JavaScript.

6 cadre JavaScript care merită învățate

Există multe cadre JavaScript pentru a ajuta la dezvoltare. Iată câteva pe care ar trebui să le știți.

Citiți în continuare

Despre autor