Det er ganske få JavaScript-biblioteker for å plotte forskjellige diagrammer, alt fra søylediagrammer til linjediagrammer og mer. Hvis du lærer hvordan du viser data dynamisk på nettstedet ditt med JavaScript, er Chart.js et slikt bibliotek du bør prøve ut.

Hvordan kan du begynne å lage datavisualiseringer med Chart.js? Du lærer hvordan i denne artikkelen.

La oss komme i gang.

Hva er Chart.js?

Chart.js er et JavaScript-bibliotek med åpen kildekode for datavisualisering som brukes til å plotte HTML-renderbare diagrammer. Den støtter for øyeblikket åtte forskjellige interaktive diagramtyper som du også kan animere. For å lage en HTML-basert graf med chart.js, trenger du et HTML-lerret for å holde det.

Biblioteket godtar et sett med datasett og andre tilpasningsparametere som bakgrunnsfarge, kantfarge og mer. Et av datasettene er merkelapp, som representerer verdiene på X-aksen. Den andre er et sett med numeriske verdier, som vanligvis ligger på Y-aksen.

Du må også spesifisere graftypen i diagramobjektet slik at biblioteket vet hvilken graf som skal plottes.

Hvordan lage diagrammer med Chart.js

Som vi nevnte tidligere, kan du lage ulike typer diagrammer med chart.js. For denne opplæringen starter du med linje- og søylediagrammer. Når du forstår konseptet bak disse, vil du ha alle verktøyene og selvtilliten du trenger for å plotte de andre tilgjengelige diagrammene.

I slekt:Hvordan gjøre nettstedet ditt responsivt og interaktivt med CSS og JavaScript

For å begynne å bruke chart.js, opprett de nødvendige filene. For denne opplæringen er filnavnene diagram.html, plot.js, og index.css. Du kan bruke hvilken som helst navnekonvensjon for filene dine.

Nå limer du inn følgende i hode delen av HTML-filen for å koble til Chart.js innholdsleveringsnettverk (CDN).

I diagram.html:

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

Deretter lager du et HTML-lerret for å holde diagrammet ditt og gi det en ID. Koble også til CSS-filen (index.css) i hode delen og pek på JavaScript-filen (plot.js) i kropp seksjon.

Strukturen til HTML-filen ser slik ut:

 Diagrammer

Og i din CSS:

kropp{
 bakgrunnsfarge:#383735;
}
h1{
 farge:#e9f0e9;
 margin-venstre: 43 %;
}
#plots{
 margin: auto;
 bakgrunnsfarge: #2e2d2d;
}

CSS-stylingen ovenfor er ikke en fast konvensjon. Så du kan style din som du vil avhengig av DOM-strukturen din. Når HTML- og CSS-filene dine er klare, er det på tide å plotte diagrammene dine med JavaScript.

Linjediagrammet

For å lage et linjediagram med chart.js, setter du diagrammet type til linje. Dette forteller biblioteket å tegne et linjediagram.

For å demonstrere dette, i JavaScript-filen din:

// Få HTML-lerretet etter id
plots = document.getElementById("plots");
// Eksempel på datasett for X- og Y-akser
var months = ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul"]; //Forblir på X-aksen
var trafikk = [65, 59, 80, 81, 56, 55, 60] //Forblir på Y-aksen
// Lag en forekomst av diagramobjekt:
nytt diagram (plott, {
 type: 'linje', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-aksedata
 datasett: [{
 data: trafikk, //Y-aksedata
 bakgrunnsfarge: '#5e440f',
 borderColor: 'hvit',
 fyll: usant, //Fyller kurven under linjen med bakgrunnsfargen. Det er sant som standard
 }]
 },
});

Produksjon:

Endre gjerne fylle verdi til ekte, bruk mer data, eller svekk fargene for å se hva som skjer.

Som du også kan se, er det en liten legendeboks øverst på diagrammet. Du kan fjerne det i en valgfri alternativer parameter.

De alternativer parameter hjelper også med andre tilpasninger i tillegg til å fjerne eller inkludere forklaringen. Du kan for eksempel bruke den til å tvinge en akse til å starte på null.

Å erklære en alternativer parameter, slik ser diagramdelen ut i JavaScript-filen din:

// Opprett en forekomst av diagramobjekt:
nytt diagram (plott, {
 type: 'linje', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-aksedata
 datasett: [{
 data: trafikk, //Y-aksedata
 bakgrunnsfarge: '#5e440f', //Farge på prikkene
 borderColor: 'hvit', //Linjefarge
 fyll: usant, //Fyller kurven under linjen med bakgrunnsfargen. Det er sant som standard
 }]
 },
 //Spesifiser egendefinerte alternativer:
 alternativer:{
 forklaring: {display: false}, //Fjern forklaringsboksen ved å sette den til usann. Det er sant som standard.
//Spesifiser innstillinger for vekten. For å få Y-aksen til å starte fra null, for eksempel:
 vekter:{
 yAxes: [{ticks: {min: 0}}] //Du kan gjenta det samme for X-aksen hvis den inneholder heltall.
 }
 } 
});

Produksjon:

Du kan også bruke forskjellige bakgrunnsfarger for hver prikk. Å variere bakgrunnsfargene på denne måten er vanligvis mer nyttig med søylediagrammer.

Lage søylediagrammer med Chart.js

Her trenger du bare å endre diagrammet type til bar. Du trenger ikke stille inn fylle alternativet fordi stolpene arver bakgrunnsfargen automatisk:

// Lag en forekomst av diagramobjekt:
nytt diagram (plott, {
 type: 'bar', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-aksedata
 datasett: [{
 data: trafikk, //Y-aksedata
 bakgrunnsfarge: '#3bf70c', //Farge på stolpene
 }]
 },
 alternativer:{
 forklaring: {display: false}, //Fjern forklaringsboksen ved å sette den til usann. Det er sant som standard.
 }
});

Produksjon:

Tving gjerne Y-aksen til å starte fra null eller en hvilken som helst verdi som du gjorde for linjediagrammet.

I slekt:JavaScript-array-metoder du bør mestre

For å bruke forskjellige farger for hver stolpe, send en rekke farger som samsvarer med antall elementer i dataene dine til bakgrunnsfarge parameter:

// Lag en forekomst av diagramobjekt:
nytt diagram (plott, {
 type: 'bar', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //X-aksedata
 datasett: [{
 data: trafikk, //Y-aksedata
//Farge på hver stolpe:
 bakgrunnsfarge: [
 "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)"],
 }]
 },
 alternativer:{
 forklaring: {display: false}, //Fjern forklaringsboksen ved å sette den til usann. Det er sant som standard.
 }
});

Produksjon:

Lage et sektordiagram med Chart.js

For å tegne et sektordiagram, endre diagramtypen til pai. Det kan også være lurt å sette forklaringens visning til ekte for å se hva hvert segment av kaken representerer:

// Opprett en forekomst av diagramobjekt:
nytt diagram (plott, {
 type: 'pai', //Deklarer diagramtypen
 data: {
 etiketter: måneder, //Definerer hvert segment
 datasett: [{
 data: trafikk, // Bestemmer segmentstørrelsen
 //Farge på hvert segment
 bakgrunnsfarge: [
 "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)"],
 }]
 },
 alternativer:{
 legend: {display: true}, //Dette er sant som standard.
}
});

Produksjon:

Som du gjorde i eksemplene ovenfor, kan du prøve andre diagrammer ved å endre type.

Likevel, her er en liste over støttede chart.js diagramtyper du kan prøve ut ved å bruke kodekonvensjonene ovenfor:

• bar
• linje
• spre
• smultring
• pai
• radar
• polarArea
• boble

Spill rundt med Chart.js

Selv om du bare har fått tak i linje-, kake- og søylediagrammer i denne opplæringen, følger kodemønsteret for å plotte andre diagrammer med chart.js samme konvensjon. Så lek gjerne med de andre også.

Med det sagt, hvis du vil ha mer enn hva chart.js tilbyr, kan det være lurt å ta en titt på noen andre JavaScript-diagrambiblioteker også.

6 JavaScript-rammer verdt å lære

Det er mange JavaScript-rammer der ute for å hjelpe med utvikling. Her er noen du bør vite.

Les Neste

Om forfatteren