Hvordan bygge et enkelt diagram med Chart.js

by
Tweet
Share
Share
Pin
0 Shares

Å visualisere data på en måte som folk kan forstå er svært viktig i en tidsalder med datadrevet beslutningstaking. Diagrammer og grafer hjelper oss enkelt å forstå komplekse data, trender og mønstre.

La oss utforske hvordan du lager et enkelt diagram ved hjelp av Chart.js, et populært JavaScript-bibliotek for datavisualisering.

Hva er Chart.js?

Chart.js er et gratis verktøy som hjelper utviklere med å lage interaktive diagrammer for nettapper. HTML5-lerretselementet gjengir diagrammene, slik at de kan fungere i moderne nettlesere.

Funksjoner i Chart.js

Funksjonene inkluderer:

  • Chart.js skiller seg ut for sin brukervennlige tilnærming. Med minimal kode kan utviklere lage interaktive og visuelt tiltalende diagrammer.
  • Biblioteket er allsidig og støtter forskjellige karttyper som linjer, søyler, paier og radarer. Den kan møte ulike behov for datarepresentasjon.
  • Chart.js designer diagrammer for å fungere godt på stasjonære og mobile enheter. De er lydhøre og tilpasningsdyktige.
  • Du kan endre Chart.js-diagrammer ved å bruke mange alternativer i stedet for standardinnstillingene. Utviklere kan finjustere diagrammer for å passe til spesifikke krav.
  Hvordan oppdage og redusere dem?

Sette opp miljøet

Du kan sette opp biblioteket på en av to måter:

Grunnleggende HTML-struktur

For å bygge inn et diagram, trenger du et lerretselement i HTML-en. Her er en grunnleggende struktur:

 <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</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>
   <h1>Welcome to My Data Representation</h1>
   <canvas id="myChart" width="400" height="150"></canvas>
  <script></script>
 </body>
</html>

For å style siden, lag en fil, style.css, og legg til følgende CSS til den:

 @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;
}
h1 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  padding: 3rem;
}

Lag ditt første diagram: Et eksempel på stolpediagram

For dette eksemplet bruker vi et stolpediagram, ideelt for å sammenligne individuelle datapunkter etter kategori.

  • I skripttaggen nederst i HTML-en din, start med å velge lerretselementet ved å bruke id-egenskapen: 
     let canvas = document.getElementById('myChart');
  • Deretter får du en kontekst for hvordan du gjengir diagrammet. I dette tilfellet er det en 2D-tegningskontekst. 
     let ctx = canvas.getContext('2d');
  • Deretter initialiserer du et nytt diagram på lerretet ved å bruke Chart()-funksjonen. Denne funksjonen tar inn lerretskonteksten som det første argumentet, deretter et objekt med alternativer inkludert dataene som skal vises i diagrammet. 
     let options = {};
    let myChart = new Chart(canvas, options);
  • Deretter fyller du inn alternativobjektet for å spesifisere diagramtypen, dataene og etikettene du vil ha i diagrammet. 
     let options = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
        }],
      },
    };

    • For øyeblikket ser diagrammet ditt slik ut:

      10 rettelser for Google Maps posisjonsdeling oppdateres ikke

    Style og tilpasse diagrammet

    Chart.js tilbyr en rekke alternativer for å tilpasse diagrammer som:

    • Farger: Tilpass kartfarger, fra stolpebakgrunner til linjekanter, med Chart.js.
    • Forklaringer: Plasser forklaringer øverst, nederst, til venstre eller til høyre for klarhet.
    • Verktøytips: Bruk verktøytips for detaljert innsikt om datapunkter som vises når du holder musepekeren.
    • Animasjoner: Angi stilen og tempoet til diagramanimasjoner for en dynamisk visning.

    Som et enkelt eksempel kan du angi noen grunnleggende stiler for datasettet ditt ved å endre alternativobjektet som følger:

     let options = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: "Total number of votes on favourite color",
          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:

      Hvordan lage og dele stedssamlinger i Apple Maps

    Beste praksis og ytelsestips

    For å sikre optimal ytelse ved gjengivelse av diagrammer:

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

    Tips for å unngå vanlige fallgruver

    Her er noen fallgruver du bør unngå:

    • Sørg for at dataene dine alltid er formatert på samme måte for å unngå overraskelser.
    • For å forbedre ytelsen er det best å begrense animasjoner. Selv om de kan bidra til å forbedre brukeropplevelsen, kan bruk av for mange føre til problemer.

    Chart.js: Styrker webdatavisualisering

    Chart.js er et nyttig verktøy når du ønsker å vise interaktive data på en attraktiv måte. Du kan enkelt lage vakre datavisualiseringer som gir innsikt og informerer beslutninger.

    Chart.js gir en sterk løsning for å visualisere data, enten du er erfaren eller ny i utvikling.