Der er en hel del JavaScript-biblioteker til at plotte forskellige diagrammer, lige fra søjlediagrammer til linjediagrammer og mere. Hvis du lærer at vise data dynamisk på dit websted med JavaScript, er Chart.js et sådant bibliotek, du bør prøve.

Hvordan kan du begynde at skabe datavisualiseringer med Chart.js? Du lærer hvordan i denne artikel.

Lad os komme igang.

Hvad er Chart.js?

Chart.js er et JavaScript-bibliotek med open source datavisualisering, der bruges til at plotte HTML-renderbare diagrammer. Det understøtter i øjeblikket otte forskellige interaktive diagramtyper, som du også kan animere. For at lave en HTML-baseret graf med chart.js skal du bruge et HTML-lærred til at holde det.

Biblioteket accepterer et sæt datasæt og andre tilpasningsparametre, såsom baggrundsfarven, kantfarve og mere. Et af datasættene er etiket, som repræsenterer værdierne på X-aksen. Den anden er et sæt numeriske værdier, som typisk ligger på Y-aksen.

Du skal også angive graftypen i diagramobjektet, så biblioteket ved, hvilken graf der skal plottes.

Sådan opretter du diagrammer med Chart.js

Som vi nævnte tidligere, kan du oprette forskellige typer diagrammer med diagram.js. Til denne øvelse starter du med linje- og søjlediagrammer. Når du forstår konceptet bag disse, har du alle de værktøjer og selvtillid, du har brug for til at plotte de andre tilgængelige diagrammer.

Relaterede:Sådan gør du din hjemmeside responsiv og interaktiv med CSS og JavaScript

At begynde at bruge diagram.js, opret de nødvendige filer. For denne øvelse er filnavnene diagram.html, plot.js, og index.css. Du kan bruge enhver navnekonvention til dine filer.

Indsæt nu følgende i hoved sektionen af ​​din HTML-fil for at linke til Chart.js indholdsleveringsnetværket (CDN).

I diagram.html:

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

Derefter skal du oprette et HTML-lærred til at holde dit diagram og give det en ID. Forbind også til CSS-filen (index.css) i hoved sektionen og peg på din JavaScript-fil (plot.js) i legeme afsnit.

Strukturen af ​​HTML-filen ser sådan ud:

 Diagrammer

Og i din CSS:

legeme{
 baggrundsfarve:#383735;
}
h1{
 farve:#e9f0e9;
 margin-venstre: 43%;
}
#plot{
 margin: auto;
 baggrundsfarve: #2e2d2d;
}

CSS-stylingen ovenfor er ikke en fast konvention. Så du kan style din som du vil afhængigt af din DOM-struktur. Når dine HTML- og CSS-filer er klar, er det tid til at plotte dine diagrammer med JavaScript.

Linjediagrammet

Til at lave et linjediagram med diagram.js, sætter du diagrammet type til linje. Dette fortæller biblioteket at tegne et linjediagram.

For at demonstrere dette, i din JavaScript-fil:

// Hent HTML-lærredet efter dets id
plots = document.getElementById("plots");
// Eksempel på datasæt for X- og Y-akser
var months = ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul"]; //Forbliver på X-aksen
var trafik = [65, 59, 80, 81, 56, 55, 60] //Forbliver på Y-aksen
// Opret en forekomst af diagramobjekt:
nyt diagram (plot, {
 type: 'line', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-akse data
 datasæt: [{
 data: trafik, //Y-akse data
 baggrundsfarve: '#5e440f',
 borderColor: 'hvid',
 udfyld: falsk, //Fylder kurven under linjen med babckground-farven. Det er sandt som standard
 }]
 },
});

Produktion:

Du er velkommen til at ændre fylde værdi til rigtigt, brug flere data, eller svække farverne for at se, hvad der sker.

Som du også kan se, er der en lille legendeboks øverst på diagrammet. Du kan fjerne det inde i en valgfri muligheder parameter.

Det muligheder parameter hjælper også med andre tilpasninger udover at fjerne eller inkludere forklaringen. For eksempel kan du bruge den til at tvinge en akse til at starte ved nul.

At erklære en muligheder parameter, sådan ser diagramafsnittet ud i din JavaScript-fil:

// Opret en forekomst af diagramobjekt:
nyt diagram (plot, {
 type: 'line', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-akse data
 datasæt: [{
 data: trafik, //Y-akse data
 baggrundsfarve: '#5e440f', //Prikkernes farve
 borderColor: 'hvid', //Linjefarve
 udfyld: falsk, //Fylder kurven under linjen med babckground-farven. Det er sandt som standard
 }]
 },
 //Angiv brugerdefinerede indstillinger:
 muligheder:{
 forklaring: {display: false}, //Fjern forklaringsboksen ved at sætte den til false. Det er sandt som standard.
//Angiv indstillinger for vægten. For at få Y-aksen til at starte fra nul, for eksempel:
 skalaer:{
 yAxes: [{ticks: {min: 0}}] //Du kan gentage det samme for X-aksen, hvis den indeholder heltal.
 }
 } 
});

Produktion:

Du kan også bruge forskellige baggrundsfarver for hver prik. At variere baggrundsfarverne på denne måde er dog normalt mere nyttigt med søjlediagrammer.

Lav søjlediagrammer med Chart.js

Her skal du kun ændre diagrammet type til bar. Du behøver ikke at indstille fylde mulighed, fordi søjlerne automatisk arver baggrundsfarven:

// Opret en forekomst af diagramobjekt:
nyt diagram (plot, {
 type: 'bar', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-akse data
 datasæt: [{
 data: trafik, //Y-akse data
 baggrundsfarve: '#3bf70c', //Farve på søjlerne
 }]
 },
 muligheder:{
 forklaring: {display: false}, //Fjern forklaringsboksen ved at sætte den til false. Det er sandt som standard.
 }
});

Produktion:

Tving gerne Y-aksen til at starte fra nul eller en hvilken som helst værdi, som du gjorde for linjediagrammet.

Relaterede:JavaScript-array-metoder, du bør mestre

For at bruge forskellige farver til hver søjle skal du sende en række farver, der matcher antallet af elementer i dine data til baggrundsfarve parameter:

// Opret en forekomst af diagramobjekt:
nyt diagram (plot, {
 type: 'bar', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-akse data
 datasæt: [{
 data: trafik, //Y-akse data
//Farven på hver søjle:
 baggrundsfarve: [
 "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)"],
 }]
 },
 muligheder:{
 forklaring: {display: false}, //Fjern forklaringsboksen ved at sætte den til false. Det er sandt som standard.
 }
});

Produktion:

Lav et cirkeldiagram med Chart.js

For at tegne et cirkeldiagram skal du ændre diagramtypen til pie. Du vil måske også indstille forklaringens visning til rigtigt for at se, hvad hvert segment af kagen repræsenterer:

// Opret en forekomst af diagramobjekt:
nyt diagram (plot, {
 type: 'pie', //Deklarer diagramtypen
 data: {
 labels: months, //Definerer hvert segment
 datasæt: [{
 data: trafik, // Bestemmer segmentstørrelsen
 //Farve på hvert segment
 baggrundsfarve: [
 "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)"],
 }]
 },
 muligheder:{
 legend: {display: true}, //Dette er sandt som standard.
}
});

Produktion:

Som du gjorde i eksemplerne ovenfor, kan du prøve andre diagrammer ved at ændre type.

Ikke desto mindre er her en liste over understøttede diagram.js diagramtyper, du kan prøve ved at bruge ovenstående kodningskonventioner:

• bar
• linje
• sprede
• doughnut
• pie
• radar
• polarArea
• boble

Spil med Chart.js

Selvom du kun har fået fat i linje-, cirkel- og søjlediagrammer i denne øvelse, følger kodemønsteret til at plotte andre diagrammer med chart.js samme konvention. Så du er velkommen til at lege med de andre også.

Med det sagt, hvis du vil have mere end hvad chart.js tilbyder, kan du måske også tage et kig på nogle andre JavaScript-diagrambiblioteker.

6 JavaScript-rammer, der er værd at lære

Der er mange JavaScript-rammer derude for at hjælpe med udvikling. Her er nogle du bør vide.

Læs Næste

Om forfatteren