Een eenvoudige grafiek maken met Chart.js
Het visualiseren van gegevens op een manier die mensen kunnen begrijpen is erg belangrijk in het tijdperk van gegevensgestuurde besluitvorming. Grafieken en diagrammen helpen ons om complexe gegevens, trends en patronen gemakkelijk te begrijpen.
Laten we ons verdiepen in het proces van het construeren van een grafische basisweergave met behulp van Chart.js, een gewaardeerde JavaScript-bibliotheek die veel wordt gebruikt voor het visueel weergeven van informatie.
Wat is Chart.js?
Chart.js is een gratis hulpmiddel waarmee ontwikkelaars interactieve grafieken kunnen maken voor webapps. Het HTML5 canvas element rendert de grafieken, waardoor ze werken op moderne browsers.
Kenmerken van Chart.js
De functies omvatten:
Chart.js staat bekend om zijn intuïtieve ontwerp waarmee ontwikkelaars zeer interactieve en esthetisch aantrekkelijke grafieken kunnen maken met minimale codeerinspanning.
De bibliotheek vertoont een hoge mate van aanpassingsvermogen door te voorzien in verschillende soorten grafieken, zoals lijngrafieken, staafdiagrammen, taartdiagrammen en radardiagrammen, waardoor wordt voldaan aan een uitgebreide reeks vereisten voor datavisualisatie.
Chart.js is een zeer veelzijdige grafiekenbibliotheek die speciaal is ontworpen om optimale prestaties te leveren op een groot aantal apparaten, waaronder desktop- en mobiele platforms. Deze grafieken hebben een indrukwekkend niveau van responsiviteit en aanpassingsvermogen, zodat ze effectief kunnen voldoen aan de behoeften van gebruikers, ongeacht het apparaat of schermformaat van hun voorkeur.
Men kan het uiterlijk en de functionaliteit van een grafiek gemaakt met Chart.js aanpassen door gebruik te maken van een reeks aanpasbare parameters, in plaats van vast te houden aan de standaard configuratie-instellingen. Hierdoor kunnen ontwikkelaars hun visualisaties aanpassen aan de unieke eisen van hun projecten.
De omgeving instellen
Er zijn twee methodes om de bibliotheek in te stellen.
⭐ Een CDN gebruiken . Neem gewoon de volgende scripttag op in de head van je HTML-document.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
⭐ Een pakketbeheerder gebruiken. Als je de voorkeur geeft aan package managers, kun je Chart.js installeren met npm, de Node Package Manager :
npm install chart.js
Of Yarn:
yarn add chart.js
Basis HTML-structuur
Om een grafische weergave in je HTML-inhoud op te nemen, is het nodig om een canvas element met de juiste opmaak op te nemen. De basisconfiguratie voor dit doel bestaat uit de volgende componenten:
<!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="./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>
Om de webpagina te verfijnen, genereer je een document met de titel “style.css”.Door de volgende CSS-regels in dit bestand op te nemen, kan het gewenste uiterlijk worden bereikt.
@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;
}
Je eerste grafiek maken: Een staafdiagramvoorbeeld
Om dit concept te illustreren, gebruiken we een staafdiagram dat bijzonder geschikt is voor het vergelijken van afzonderlijke stukjes informatie in verschillende categorieën.
⭐ Selecteer in de scripttag onderaan je HTML eerst het canvaselement met de id-eigenschap:
let canvas = document.getElementById('myChart');
⭐ Verkrijg vervolgens een context voor de weergave van je grafiek. In dit geval is het een 2D tekencontext.
let ctx = canvas.getContext('2d');
⭐ Vervolgens initialiseer je een nieuwe grafiek op het canvas met de functie Chart(). Deze functie neemt de canvascontext als eerste argument en vervolgens een object met opties, inclusief de gegevens die in de grafiek moeten worden weergegeven.
let options = {};
let myChart = new Chart(canvas, options);
⭐ Vul vervolgens het optie-object in om het grafiektype, de gegevens en de labels te specificeren die je in je grafiek wilt.
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],
}],
},
};
Momenteel ziet je grafiek er als volgt uit:
De grafiek stylen en aanpassen
Chart.js biedt een uitgebreide reeks mogelijkheden om grafieken te personaliseren, inclusief maar niet beperkt tot:
Verbeter je visuele ervaring door grafiekkleuren aan te passen met Chart.js. Je kunt niet alleen de achtergrond van de balken personaliseren, maar ook de randen van de lijnen om een unieke en visueel aantrekkelijke weergave van gegevens te creëren.
De legenda kan op verschillende plaatsen worden geplaatst om de leesbaarheid en het begrip van de gegevens in de grafiek te verbeteren. Door de legenda boven, onder, links of rechts te plaatsen, kunnen gebruikers gemakkelijk patronen en trends herkennen in de visuele weergave.
Gebruik tooltips om uitgebreide informatie te geven over gegevenspunten wanneer je er met de muis overheen gaat, voor een beter begrip van de weergegeven inhoud.
Door de animatieattributen van grafieken aan te passen, kunnen gebruikers de visuele weergave aanpassen en de algehele dynamiek en interactiviteit van de gegevenspresentatie verbeteren door middel van aangepaste overgangen en duurinstellingen.
Overweeg de configuratie van je dataset aan te passen door het optie-object aan te passen op een manier die eenvoud uitstraalt.Een mogelijke aanpak is bijvoorbeeld om het optie-object te wijzigen zoals hieronder wordt geïllustreerd:
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,
}],
},
};
Je grafiek zou er nu zo uit moeten zien:
Beste praktijken en prestatietips
Om te zorgen voor optimale prestaties bij het renderen van grafieken:
Om de prestaties van Chart.js te optimaliseren, wordt aanbevolen om het aantal gebruikte gegevenspunten te beperken om het renderen te versnellen en de algehele gebruikerservaring te verbeteren.
Als het nodig is om een grafiek of diagram regelmatig bij te werken, is het raadzaam om de functie “destroy()” te gebruiken om elke eerder gerenderde weergave te verwijderen voordat een nieuwe visualisatie wordt gegenereerd. Deze aanpak helpt ervoor te zorgen dat alleen de meest recente en accurate gegevens worden weergegeven in de grafiek.
Tips om veelvoorkomende valkuilen te vermijden
Hier zijn enkele valkuilen om te vermijden:
Zorg ervoor dat je informatie consequent een uniforme structuur volgt, om mogelijke inconsistenties of onvoorziene complicaties te voorkomen.
Om de prestaties te optimaliseren, is het raadzaam om het gebruik van animaties te beperken, omdat overmatig gebruik kan leiden tot ongewenste gevolgen, ondanks dat ze de tevredenheid van de gebruiker kunnen verhogen.
Chart.js: Empowering Web Data Visualization
Het gebruik van Chart.js maakt het mogelijk om visueel aantrekkelijke en interactieve weergaven van gegevens te maken, wat de opheldering van relevante inzichten en de geïnformeerde vorming van conclusies vergemakkelijkt.
Chart.js biedt een effectieve manier om informatie visueel weer te geven, ongeacht iemands programmeerkennis.