Sådan bygger du et simpelt diagram med Chart.js

Af
Tweet
Share
Share
Pin

Visualisering af data på en måde, som folk kan forstå, er meget vigtigt i en tidsalder med datadrevet beslutningstagning. Diagrammer og grafer hjælper os med let at forstå komplekse data, tendenser og mønstre.

Lad os undersøge, hvordan man opretter et simpelt diagram ved hjælp af Chart.js, et populært JavaScript-bibliotek til datavisualisering.

Hvad er Chart.js?

Chart.js er et gratis værktøj, der hjælper udviklere med at lave interaktive diagrammer til webapps. HTML5-lærredselementet gengiver diagrammerne, så de kan arbejde på moderne browsere.

Funktioner i Chart.js

Funktionerne omfatter:

  • Chart.js skiller sig ud for sin brugervenlige tilgang. Med minimal kode kan udviklere lave interaktive og visuelt tiltalende diagrammer.
  • Biblioteket er alsidigt og understøtter forskellige diagramtyper som linjer, søjler, tærter og radarer. Det kan imødekomme forskellige behov for datarepræsentation.
  • Chart.js designer diagrammer, så de fungerer godt på stationære og mobile enheder. De er lydhøre og tilpasningsdygtige.
  • Du kan ændre Chart.js-diagrammer ved at bruge mange muligheder i stedet for standardindstillingerne. Udviklere kan finjustere diagrammer, så de passer til specifikke krav.
  10 bedste luftcirkulatorer du kan købe for at slå varmen

Opsætning af miljøet

Du kan konfigurere biblioteket på en af ​​to måder:

Grundlæggende HTML-struktur

For at indlejre et diagram skal du bruge et lærredselement i din HTML. Her er en grundlæggende 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 at style siden skal du oprette en fil, style.css, og tilføje 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;
}

Lav dit første diagram: Et eksempel på søjlediagram

Til dette eksempel vil vi bruge et søjlediagram, ideelt til at sammenligne individuelle datapunkter efter kategori.

  • I script-tagget nederst i din HTML skal du starte med at vælge lærredselementet ved hjælp af dets id-egenskab: 
     let canvas = document.getElementById('myChart');
  • Derefter skal du få en kontekst for, hvordan du gengiver dit diagram. I dette tilfælde er det en 2D-tegningskontekst. 
     let ctx = canvas.getContext('2d');
  • Derefter initialiseres et nyt diagram på lærredet ved hjælp af funktionen Chart(). Denne funktion tager lærredskonteksten ind som det første argument, derefter et objekt af muligheder, herunder de data, der skal vises i diagrammet. 
     let options = {};
    let myChart = new Chart(canvas, options);
  • Udfyld derefter indstillingsobjektet for at angive diagramtypen, dataene og de etiketter, du ønsker i dit diagram. 
     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],
        }],
      },
    };

    • I øjeblikket ser dit diagram sådan ud:

      Sådan sender du tekstbeskeder fra din Chromebook

    Style og tilpasning af diagrammet

    Chart.js tilbyder et væld af muligheder for at tilpasse diagrammer såsom:

    • Farver: Tilpas diagramfarver, fra bjælkebaggrunde til linjekanter, med Chart.js.
    • Forklaringer: Placer forklaringer øverst, nederst, til venstre eller til højre for klarhed.
    • Værktøjstip: Brug værktøjstip til at få detaljeret indsigt i datapunkter, der vises, når du svæver.
    • Animationer: Indstil stilen og tempoet for diagramanimationer for en dynamisk visning.

    Som et simpelt eksempel kan du indstille nogle grundlæggende stilarter for dit datasæt ved at ændre indstillingsobjektet 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,
        }],
      },
    };

    Dit diagram skulle nu se sådan ud:

      De 8 bedste steder at installere smartkameraer

    Bedste praksis og præstationstips

    For at sikre optimal ydeevne ved gengivelse af diagrammer:

    • Begræns de datapunkter, der bruges i Chart.js for hurtigere gengivelse og en bedre brugeroplevelse.
    • Hvis du opdaterer et diagram ofte, skal du bruge destroy()-metoden til at fjerne det gamle diagram, før du gengiver et nyt.

    Tips til at undgå almindelige faldgruber

    Her er nogle faldgruber, du skal undgå:

    • Sørg for, at dine data altid er formateret på samme måde for at undgå overraskelser.
    • For at forbedre ydeevnen er det bedst at begrænse animationer. Selvom de kan hjælpe med at forbedre brugeroplevelsen, kan det give problemer at bruge for mange.

    Chart.js: Styrker webdatavisualisering

    Chart.js er et nyttigt værktøj, når du vil vise interaktive data på en attraktiv måde. Du kan nemt skabe smukke datavisualiseringer, der giver indsigt og informerer beslutninger.

    Chart.js giver en stærk løsning til visualisering af data, uanset om du er erfaren eller ny inden for udvikling.