Det finns en hel del JavaScript-bibliotek för att rita olika diagram, allt från stapeldiagram till linjediagram och mer. Om du lär dig hur du visar data dynamiskt på din webbplats med JavaScript, är Chart.js ett sådant bibliotek du bör prova.

Hur kan du börja skapa datavisualiseringar med Chart.js? Du kommer att lära dig hur i den här artikeln.

Låt oss börja.

Vad är Chart.js?

Chart.js är ett JavaScript-bibliotek för datavisualisering med öppen källkod som används för att plotta HTML-renderbara diagram. Den stöder för närvarande åtta olika typer av interaktiva diagram som du också kan animera. För att göra en HTML-baserad graf med chart.js behöver du en HTML-duk för att hålla den.

Biblioteket accepterar en uppsättning datauppsättningar och andra anpassningsparametrar som bakgrundsfärg, kantfärg med mera. En av datamängderna är märka, som representerar värdena på X-axeln. Den andra är en uppsättning numeriska värden, som vanligtvis ligger på Y-axeln.

Du måste också ange graftypen i diagramobjektet så att biblioteket vet vilken graf som ska ritas.

Hur man skapar diagram med Chart.js

Som vi nämnde tidigare kan du skapa olika typer av diagram med chart.js. För den här handledningen börjar du med linje- och stapeldiagram. När du väl förstår konceptet bakom dessa har du alla verktyg och självförtroende du behöver för att rita upp de andra tillgängliga diagrammen.

Relaterad:Hur du gör din webbplats responsiv och interaktiv med CSS och JavaScript

För att börja använda chart.js, skapa de nödvändiga filerna. För den här handledningen är filnamnen diagram.html, plot.js, och index.css. Du kan använda vilken namnkonvention som helst för dina filer.

Klistra nu in följande i huvud delen av din HTML-fil för att länka till Chart.js innehållsleveransnätverk (CDN).

I diagram.html:

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

Skapa sedan en HTML-duk för att hålla ditt diagram och ge det en ID. Anslut också till CSS-filen (index.css) i huvud och peka på din JavaScript-fil (plot.js) i kropp sektion.

Strukturen för HTML-filen ser ut så här:

 Diagram

Och i din CSS:

kropp{
 bakgrundsfärg:#383735;
}
h1{
 färg:#e9f0e9;
 marginal-vänster: 43%;
}
#plots{
 marginal: auto;
 bakgrundsfärg: #2e2d2d;
}

CSS-stylingen ovan är inte en fast konvention. Så du kan styla din som du vill beroende på din DOM-struktur. När dina HTML- och CSS-filer är klara är det dags att rita upp dina diagram med JavaScript.

Linjediagrammet

Att göra ett linjediagram med chart.js, ställer du in diagrammet typ till linje. Detta talar om för biblioteket att rita ett linjediagram.

För att visa detta, i din JavaScript-fil:

// Hämta HTML-duken efter dess id
plots = document.getElementById("plots");
// Exempel på dataset för X- och Y-axlar
var months = ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul"]; //Står på X-axeln
var trafik = [65, 59, 80, 81, 56, 55, 60] //Står på Y-axeln
// Skapa en instans av diagramobjekt:
nytt diagram (plott, {
 typ: 'line', //Deklarera diagramtypen
 data: {
 etiketter: månader, //X-axeldata
 datauppsättningar: [{
 data: trafik, //Y-axeldata
 bakgrundsfärg: '#5e440f',
 borderColor: 'vit',
 fyll: falskt, //Fyller kurvan under linjen med bakgrundsfärgen. Det är sant som standard
 }]
 },
});

Produktion:

Ändra gärna fylla värde till Sann, använd mer data, eller försvaga färgerna för att se vad som händer.

Som du också kan se finns det en liten legendruta överst i diagrammet. Du kan ta bort det i ett tillval alternativ parameter.

De alternativ parametern hjälper också till med andra anpassningar förutom att ta bort eller inkludera förklaringen. Du kan till exempel använda den för att tvinga en axel att börja på noll.

Att deklarera en alternativ parameter, så här ser diagramsektionen ut i din JavaScript-fil:

// Skapa en instans av diagramobjekt:
nytt diagram (plott, {
 typ: 'line', //Deklarera diagramtypen
 data: {
 etiketter: månader, //X-axeldata
 datauppsättningar: [{
 data: trafik, //Y-axeldata
 bakgrundsfärg: '#5e440f', //Prickarnas färg
 borderColor: 'vit', //Linjefärg
 fyll: falskt, //Fyller kurvan under linjen med bakgrundsfärgen. Det är sant som standard
 }]
 },
 //Ange anpassade alternativ:
 alternativ:{
 legend: {display: false}, //Ta bort förklaringsrutan genom att ställa in den på false. Det är sant som standard.
//Ange inställningar för vågen. För att få Y-axeln att börja från noll, till exempel:
 vågar:{
 yAxes: [{ticks: {min: 0}}] //Du kan upprepa detsamma för X-axeln om den innehåller heltal.
 }
 } 
});

Produktion:

Du kan också använda olika bakgrundsfärger för varje prick. Att variera bakgrundsfärgerna på detta sätt är dock vanligtvis mer användbart med stapeldiagram.

Gör stapeldiagram med Chart.js

Här behöver du bara ändra diagrammet typ till bar. Du behöver inte ställa in fylla alternativet eftersom staplarna ärver bakgrundsfärgen automatiskt:

// Skapa en instans av diagramobjekt:
nytt diagram (plott, {
 typ: 'bar', //Deklarera diagramtypen
 data: {
 etiketter: månader, //X-axeldata
 datauppsättningar: [{
 data: trafik, //Y-axeldata
 bakgrundsfärg: '#3bf70c', //Färg på staplarna
 }]
 },
 alternativ:{
 legend: {display: false}, //Ta bort förklaringsrutan genom att ställa in den på false. Det är sant som standard.
 }
});

Produktion:

Tvinga gärna Y-axeln att börja från noll eller något värde som du gjorde för linjediagrammet.

Relaterad:JavaScript-array-metoder du bör behärska

För att använda olika färger för varje stapel, skicka en rad färger som matchar antalet objekt i din data till bakgrundsfärg parameter:

// Skapa en instans av diagramobjekt:
nytt diagram (plott, {
 typ: 'bar', //Deklarera diagramtypen
 data: {
 etiketter: månader, //X-axeldata
 datauppsättningar: [{
 data: trafik, //Y-axeldata
//Färg på varje stapel:
 bakgrundsfärg: [
 "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)"],
 }]
 },
 alternativ:{
 legend: {display: false}, //Ta bort förklaringsrutan genom att ställa in den på false. Det är sant som standard.
 }
});

Produktion:

Göra ett cirkeldiagram med Chart.js

För att rita ett cirkeldiagram, ändra diagramtypen till paj. Du kanske också vill ställa in legendens visning till Sann för att se vad varje segment av pajen representerar:

// Skapa en instans av diagramobjekt:
nytt diagram (plott, {
 typ: 'pie', //Deklarera diagramtypen
 data: {
 etiketter: månader, //Definierar varje segment
 datauppsättningar: [{
 data: trafik, //Bestämmer segmentstorlek
 //Färg på varje segment
 bakgrundsfärg: [
 "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)"],
 }]
 },
 alternativ:{
 legend: {display: true}, //Detta är sant som standard.
}
});

Produktion:

Som du gjorde i exemplen ovan kan du prova andra diagram genom att ändra typ.

Icke desto mindre, här är en lista över stödda chart.js diagramtyper du kan prova med hjälp av ovanstående kodningskonventioner:

• bar
• linje
• sprida ut
• munk
• paj
• radar
• polarArea
• bubbla

Spela runt med Chart.js

Även om du bara har tagit hand om linje-, cirkel- och stapeldiagram i denna handledning, följer kodmönstret för att plotta andra diagram med chart.js samma konvention. Så lek gärna med de andra också.

Med det sagt, om du vill ha mer än vad chart.js erbjuder, kanske du vill ta en titt på några andra JavaScript-diagrambibliotek också.

6 JavaScript-ramverk värda att lära sig

Det finns många JavaScript-ramverk där ute för att hjälpa till med utvecklingen. Här är några du bör känna till.

Läs Nästa

Om författaren