Lag enkle diagrammer med Chart.js: En komplett guide

0 Shares

I en tid der datadrevet beslutningstaking er avgjørende, er evnen til å presentere data på en forståelig måte uunnværlig. Diagrammer og grafer gir oss en enkel tilgang til å tolke komplekse data, identifisere trender og avdekke mønstre.

La oss undersøke hvordan vi kan skape et enkelt diagram ved hjelp av Chart.js, et populært JavaScript-bibliotek for datavisualisering.

Hva er Chart.js?

Chart.js er et kostnadsfritt verktøy som hjelper utviklere med å produsere interaktive diagrammer for webapplikasjoner. Disse diagrammene blir gjengitt ved hjelp av HTML5-canvas-elementet, noe som sikrer at de fungerer i alle moderne nettlesere.

Funksjoner i Chart.js

Blant funksjonene finner vi:

Chart.js utmerker seg med sin brukervennlige tilnærming. Utviklere kan skape interaktive og visuelt appellerende diagrammer med minimal kode.
Biblioteket er allsidig og støtter et bredt spekter av diagramtyper, inkludert linjediagrammer, stolpediagrammer, kakediagrammer og radardiagrammer, noe som imøtekommer diverse behov for datarepresentasjon.
Chart.js er konstruert for å fungere sømløst på både stasjonære og mobile enheter, og tilbyr responsive og tilpasningsdyktige diagrammer.
Diagrammer i Chart.js kan tilpasses med et mangfold av konfigurasjonsalternativer, som lar utviklere finjustere dem for å oppfylle spesifikke krav.

Sette opp miljøet

Biblioteket kan settes opp på to måter:

Grunnleggende HTML-struktur

For å integrere et diagram, trenger vi et canvas-element i HTML-koden. Her er en enkel struktur:

<html lang="no">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Datavisualisering</title>
  <link rel="stylesheet" href="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
  <h2>Velkommen til min datarepresentasjon</h2>
  <canvas id="myChart" width="400" height="150"></canvas>
  <script></script>
 </body>
</html>

For å style siden, opprett en fil ved navn style.css, og tilføy følgende CSS:

 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Tilt Neon", sans-serif;
  padding: 2rem 4rem;
}
h2 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  padding: 3rem;
}

Lag ditt første diagram: Et stolpediagram som eksempel

I dette eksemplet vil vi benytte et stolpediagram, som er velegnet for å sammenligne individuelle datapunkter basert på kategorier.

I <script>-taggen nederst i HTML-dokumentet, start med å velge canvas-elementet ved hjelp av dets id-attributt:

let canvas = document.getElementById('myChart');

Deretter, hent en kontekst for hvordan diagrammet skal gjengis. I dette tilfellet er det en 2D-kontekst:

let ctx = canvas.getContext('2d');

Etter dette, initialiser et nytt diagram på canvas-elementet ved bruk av Chart()-funksjonen. Denne funksjonen tar canvas-konteksten som første argument, etterfulgt av et objekt med alternativer, inkludert dataene som skal vises i diagrammet:

let options = {};
let myChart = new Chart(canvas, options);

Fyll deretter ut alternativobjektet for å spesifisere diagramtype, data og etiketter du ønsker i diagrammet:

let options = {
  type: "bar",
  data: {
    labels: ["Rød", "Blå", "Gul", "Grønn", "Lilla", "Oransje"],
    datasets: [{
      label: "Totalt antall stemmer på favorittfarge",
      data: [12, 19, 3, 5, 2, 3],
    }],
  },
};

På dette punktet vil diagrammet ditt se slik ut:

Styling og tilpasning av diagrammet

Chart.js tilbyr en rekke alternativer for tilpasning av diagrammer, inkludert:

Farger: Tilpass diagramfarger, fra bakgrunner i stolpediagrammer til linjekanter, med Chart.js.
Forklaringer: Plasser forklaringer øverst, nederst, til venstre eller høyre for å oppnå klarhet.
Verktøytips: Implementer verktøytips for å vise detaljert informasjon om datapunkter når du holder musepekeren over dem.
Animasjoner: Angi stilen og hastigheten på animasjoner i diagrammet for et mer dynamisk visuelt uttrykk.

Som et enkelt eksempel, la oss sette opp noen grunnleggende stiler for datasettet ved å endre alternativobjektet som følger:

let options = {
  type: "bar",
  data: {
    labels: ["Rød", "Blå", "Gul", "Grønn", "Lilla", "Oransje"],
    datasets: [{
      label: "Totalt antall stemmer på favorittfarge",
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: "rgba(75, 192, 192, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 1,
    }],
  },
};

Diagrammet ditt skal nå se slik ut:

Anbefalte fremgangsmåter og ytelsestips

For å sikre optimal ytelse ved gjengivelse av diagrammer:

Begrens mengden datapunkter som benyttes i Chart.js for å oppnå raskere gjengivelse og en bedre brukeropplevelse.
Hvis du oppdaterer diagrammet ofte, bruk destroy()-metoden for å fjerne det gamle diagrammet før du gjengir et nytt.

Tips for å unngå vanlige feil

Her er noen vanlige fallgruver å unngå:

Sørg for at dataene dine alltid er formatert konsekvent for å unngå uventede resultater.
For å forbedre ytelsen er det best å begrense animasjonene. Selv om de kan forbedre brukeropplevelsen, kan for mange animasjoner skape problemer.

Chart.js: Fremmer webdatavisualisering

Chart.js er et verdifullt verktøy når du ønsker å presentere interaktive data på en tiltalende måte. Du kan enkelt skape vakre datavisualiseringer som gir innsikt og styrker beslutningsprosesser.

Chart.js tilbyr en robust løsning for datavisualisering, uansett om du er erfaren eller ny innen webutvikling.