Er zijn nogal wat JavaScript-bibliotheken voor het plotten van verschillende grafieken, variërend van staafdiagrammen tot lijndiagrammen en meer. Als u leert hoe u gegevens dynamisch op uw website kunt weergeven met JavaScript, is Chart.js zo'n bibliotheek die u moet uitproberen.

Hoe kunt u beginnen met het maken van datavisualisaties met Chart.js? In dit artikel leer je hoe.

Laten we beginnen.

Wat is Chart.js?

Chart.js is een open-source JavaScript-bibliotheek voor gegevensvisualisatie die wordt gebruikt om HTML-renderbare grafieken te plotten. Het ondersteunt momenteel acht verschillende soorten interactieve grafieken die u ook kunt animeren. Om een ​​op HTML gebaseerde grafiek te maken met chart.js, heb je een HTML-canvas nodig om het vast te houden.

De bibliotheek accepteert een reeks gegevenssets en andere aanpassingsparameters, zoals de achtergrondkleur, randkleur en meer. Een van de datasets is de label, die de waarden op de X-as vertegenwoordigt. De andere is een reeks numerieke waarden, die meestal op de Y-as liggen.

U moet ook het grafiektype binnen het grafiekobject specificeren, zodat de bibliotheek weet welke grafiek moet worden geplot.

Grafieken maken met Chart.js

Zoals we eerder vermeldden, kunt u verschillende soorten grafieken maken met chart.js. Voor deze zelfstudie begin je met lijn- en staafdiagrammen. Zodra u het concept erachter begrijpt, beschikt u over alle tools en het vertrouwen die u nodig hebt om de andere beschikbare grafieken te plotten.

Verwant:Hoe u uw website responsief en interactief kunt maken met CSS en JavaScript

Aan de slag: chart.js, maak de benodigde bestanden aan. Voor deze zelfstudie zijn de bestandsnamen: grafiek.html, plot.js, en index.css. U kunt elke naamgevingsconventie voor uw bestanden gebruiken.

Plak nu het volgende in de hoofd gedeelte van uw HTML-bestand om te linken naar het Chart.js Content Delivery Network (CDN).

In grafiek.html:

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

Maak vervolgens een HTML-canvas om uw diagram vast te houden en geef het een ID kaart. Maak ook verbinding met het CSS-bestand (index.css) in de hoofd sectie en wijs naar uw JavaScript-bestand (plot.js) in de lichaam sectie.

De structuur van het HTML-bestand ziet er als volgt uit:

 Grafieken

En in jouw CSS:

lichaam{
 achtergrondkleur: #383735;
}
h1{
 kleur:#e9f0e9;
 marge links: 43%;
}
#percelen{
 marge: automatisch;
 achtergrondkleur: #2e2d2d;
}

De bovenstaande CSS-stijl is geen vaste conventie. Dus je kunt de jouwe stylen zoals je wilt, afhankelijk van je DOM-structuur. Zodra uw HTML- en CSS-bestanden gereed zijn, is het tijd om uw grafieken te plotten met JavaScript.

Het lijndiagram

Een lijndiagram maken met chart.js, jij bepaalt de grafiek type naar lijn. Dit vertelt de bibliotheek om een ​​lijndiagram te tekenen.

Om dit aan te tonen, in uw JavaScript-bestand:

// Haal het HTML-canvas op met zijn id
plots = document.getElementById("plots");
// Voorbeeldgegevenssets voor X- en Y-assen
var months = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul"]; //Blijft op de X-as
var verkeer = [65, 59, 80, 81, 56, 55, 60] //Blijft op de Y-as
// Maak een instantie van Chart-object:
nieuwe kaart (plots, {
 typ: 'lijn', // Declareer het grafiektype
 gegevens: {
 etiketten: maanden, //X-as gegevens
 gegevenssets: [{
 dataverkeer, //Y-as gegevens
 achtergrondkleur: '#5e440f',
 randKleur: 'wit',
 vul: vals, //Vult de curve onder de lijn met de achtergrondkleur. Het is standaard waar
 }]
 },
});

Uitgang::

Verander gerust de vullen waarde aan waar, gebruik meer gegevens of pas de kleuren aan om te zien wat er gebeurt.

Zoals je ook kunt zien, staat er een klein legendavak bovenaan de grafiek. U kunt dat verwijderen in een optionele opties parameter.

De opties parameter helpt ook bij andere aanpassingen naast het verwijderen of opnemen van de legenda. U kunt het bijvoorbeeld gebruiken om een ​​as te dwingen bij nul te beginnen.

om een ​​aan te geven opties parameter, ziet het diagramgedeelte er als volgt uit in uw JavaScript-bestand:

// Maak een instantie van Chart-object:
nieuwe kaart (plots, {
 typ: 'lijn', // Declareer het grafiektype
 gegevens: {
 etiketten: maanden, //X-as gegevens
 gegevenssets: [{
 dataverkeer, //Y-as gegevens
 achtergrondkleur: '#5e440f', //Kleur van de stippen
 randKleur: 'wit', //Lijnkleur
 vul: vals, //Vult de curve onder de lijn met de achtergrondkleur. Het is standaard waar
 }]
 },
 //Geef aangepaste opties op:
 opties:{
 legende: {display: false}, //Verwijder het legendavak door het in te stellen op false. Het is standaard waar.
// Specificeer instellingen voor de schalen. Om de Y-as bijvoorbeeld vanaf nul te laten beginnen:
 schubben:{
 yAxes: [{ticks: {min: 0}}] //U kunt hetzelfde herhalen voor de X-as als deze gehele getallen bevat.
 }
 } 
});

Uitgang::

Je kunt ook voor elke stip verschillende achtergrondkleuren gebruiken. Het op deze manier variëren van de achtergrondkleuren is echter meestal handiger bij staafdiagrammen.

Staafdiagrammen maken met Chart.js

Hier hoeft u alleen de grafiek te wijzigen type naar bar. U hoeft de vullen optie omdat de balken automatisch de achtergrondkleur overnemen:

// Maak een instantie van Chart-object:
nieuwe kaart (plots, {
 typ: 'bar', // Declareer het grafiektype
 gegevens: {
 etiketten: maanden, //X-as gegevens
 gegevenssets: [{
 dataverkeer, //Y-as gegevens
 achtergrondkleur: '#3bf70c', //Kleur van de balken
 }]
 },
 opties:{
 legende: {display: false}, //Verwijder het legendavak door het in te stellen op false. Het is standaard waar.
 }
});

Uitgang::

Voel je vrij om de Y-as te forceren om vanaf nul of een andere waarde te beginnen, zoals je deed voor het lijndiagram.

Verwant:JavaScript-matrixmethoden die u moet beheersen

Als u voor elke balk verschillende kleuren wilt gebruiken, geeft u een reeks kleuren door die overeenkomen met het aantal items in uw gegevens in de Achtergrond kleur parameter:

// Maak een instantie van Chart-object:
nieuwe kaart (plots, {
 typ: 'bar', // Declareer het grafiektype
 gegevens: {
 etiketten: maanden, //X-as gegevens
 gegevenssets: [{
 dataverkeer, //Y-as gegevens
//Kleur van elke balk:
 Achtergrond kleur: [
 "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)"],
 }]
 },
 opties:{
 legende: {display: false}, //Verwijder het legendavak door het in te stellen op false. Het is standaard waar.
 }
});

Uitgang::

Een cirkeldiagram maken met Chart.js

Om een ​​cirkeldiagram te tekenen, wijzigt u het diagramtype in taart. U kunt ook de weergave van de legenda instellen op: waar om te zien wat elk segment van de taart vertegenwoordigt:

// Maak een instantie van Chart-object:
nieuwe kaart (plots, {
 type: 'pie', //Declareer het grafiektype
 gegevens: {
 labels: maanden, // Definieert elk segment
 gegevenssets: [{
 data: verkeer, // Bepaalt segmentgrootte
 //Kleur van elk segment
 Achtergrond kleur: [
 "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)"],
 }]
 },
 opties:{
 legende: {display: true}, // Dit is standaard waar.
}
});

Uitgang::

Zoals u in de bovenstaande voorbeelden deed, kunt u andere grafieken uitproberen door de type.

Niettemin, hier is een lijst met ondersteunde chart.js diagramtypen die u kunt uitproberen met behulp van de bovenstaande codeerconventies:

• bar
• lijn
• verstrooien
• donut
• taart
• radar
• polarArea
• bubbel

Speel rond met Chart.js

Hoewel u in deze zelfstudie alleen lijn-, taart- en staafdiagrammen hebt leren kennen, volgt het codepatroon voor het plotten van andere grafieken met chart.js dezelfde conventie. Dus voel je vrij om ook met de anderen te spelen.

Dat gezegd hebbende, als je meer wilt dan wat chart.js biedt, wil je misschien ook eens kijken naar enkele andere JavaScript-kaartbibliotheken.

6 JavaScript-frameworks die het leren waard zijn

Er zijn veel JavaScript-frameworks om te helpen bij de ontwikkeling. Hier zijn er enkele die u moet weten.

Lees volgende

Over de auteur