Hur man bygger ett enkelt diagram med Chart.js

Att visualisera data på ett sätt som människor kan förstå är mycket viktigt i en tid av datadrivet beslutsfattande. Diagram och diagram hjälper oss att enkelt förstå komplexa data, trender och mönster.

Låt oss utforska hur man skapar ett enkelt diagram med Chart.js, ett populärt JavaScript-bibliotek för datavisualisering.

Vad är Chart.js?

Chart.js är ett gratis verktyg som hjälper utvecklare att göra interaktiva diagram för webbappar. HTML5 canvas-elementet återger diagrammen, vilket gör att de kan fungera i moderna webbläsare.

Funktioner i Chart.js

Funktionerna inkluderar:

  • Chart.js utmärker sig för sitt användarvänliga tillvägagångssätt. Med minimal kod kan utvecklare skapa interaktiva och visuellt tilltalande diagram.
  • Biblioteket är mångsidigt och stöder olika diagramtyper som linjer, staplar, pajer och radar. Det kan möta olika behov av datarepresentation.
  • Chart.js designar diagram för att fungera bra på stationära och mobila enheter. De är lyhörda och anpassningsbara.
  • Du kan ändra Chart.js-diagram genom att använda många alternativ istället för standardinställningarna. Utvecklare kan finjustera diagram för att passa specifika krav.

Ställa in miljön

Du kan ställa in biblioteket på ett av två sätt:

Grundläggande HTML-struktur

För att bädda in ett diagram behöver du ett canvaselement i din HTML. Här är en grundläggande 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>

För att formatera sidan, skapa en fil, style.css, och lägg till följande CSS till 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;
}

Skapa ditt första diagram: Ett exempel på stapeldiagram

I det här exemplet använder vi ett stapeldiagram, perfekt för att jämföra enskilda datapunkter efter kategori.

  • Börja med att välja canvas-elementet i skripttaggen längst ned i HTML-koden med dess id-egenskap:
     let canvas = document.getElementById('myChart'); 
  • Skaffa sedan ett sammanhang för hur du renderar ditt diagram. I det här fallet är det ett 2D-ritningssammanhang.
     let ctx = canvas.getContext('2d'); 
  • Initiera sedan ett nytt diagram på arbetsytan med funktionen Chart(). Den här funktionen tar i arbetsytan som det första argumentet, sedan ett objekt med alternativ inklusive data som ska visas i diagrammet.
     let options = {};
    let myChart = new Chart(canvas, options);
  • Fyll sedan i alternativobjektet för att ange diagramtyp, data och etiketter du vill ha i ditt 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],
        }],
      },
    };

  • För tillfället ser ditt diagram ut så här:

    Styla och anpassa diagrammet

    Chart.js erbjuder en mängd alternativ för att anpassa diagram som:

    • Färger: Anpassa diagramfärger, från stapelbakgrunder till linjekanter, med Chart.js.
    • Förklaringar: Placera förklaringar överst, botten, till vänster eller höger för klarhet.
    • Verktygstips: Använd verktygstips för detaljerade insikter om datapunkter som visas när du håller muspekaren.
    • Animationer: Ställ in stilen och takten för diagramanimationer för en dynamisk visning.

    Som ett enkelt exempel kan du ställa in några grundläggande stilar för din datauppsättning genom att ändra alternativobjektet enligt följande:

     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,
        }],
      },
    };

    Ditt diagram bör nu se ut så här:

    Bästa praxis och prestationstips

    För att säkerställa optimal prestanda vid rendering av diagram:

    • Begränsa datapunkterna som används i Chart.js för snabbare rendering och en bättre användarupplevelse.
    • Om du uppdaterar ett diagram ofta, använd metoden destroy() för att ta bort det gamla diagrammet innan du renderar ett nytt.

    Tips för att undvika vanliga fallgropar

    Här är några fallgropar att undvika:

    • Se till att dina data alltid är formaterade på samma sätt för att undvika överraskningar.
    • För att förbättra prestandan är det bäst att begränsa animationer. Även om de kan bidra till att förbättra användarupplevelsen, kan användning av för många orsaka problem.

    Chart.js: Styrkande av webbdatavisualisering

    Chart.js är ett användbart verktyg när du vill visa interaktiv data på ett attraktivt sätt. Du kan enkelt skapa vackra datavisualiseringar som ger insikter och informerar beslut.

    Chart.js tillhandahåller en stark lösning för att visualisera data, oavsett om du är erfaren eller ny på utveckling.