Il existe quelques bibliothèques JavaScript pour tracer divers graphiques, allant des graphiques à barres aux graphiques linéaires, etc. Si vous apprenez à afficher des données de manière dynamique sur votre site Web avec JavaScript, Chart.js est l’une de ces bibliothèques que vous devriez essayer.
Comment pouvez-vous commencer à créer des visualisations de données avec Chart.js ? Vous apprendrez comment dans cet article.
Commençons.
Qu’est-ce que Chart.js ?
Chart.js est une bibliothèque JavaScript de visualisation de données open source utilisée pour tracer des graphiques pouvant être rendus en HTML. Il prend actuellement en charge huit types de graphiques interactifs différents que vous pouvez également animer. Pour créer un graphique basé sur HTML avec chart.js, vous avez besoin d’un canevas HTML pour le contenir.
La bibliothèque accepte un ensemble de jeux de données et d’autres paramètres de personnalisation tels que la couleur d’arrière-plan, la couleur de la bordure, etc. L’un des ensembles de données est le étiqueter, qui représente les valeurs sur l’axe X. L’autre est un ensemble de valeurs numériques, qui se situent généralement sur l’axe Y.
Vous devez également spécifier le type de graphique dans l’objet graphique afin que la bibliothèque sache quel graphique tracer.
Comment créer des graphiques avec Chart.js
Comme nous l’avons mentionné précédemment, vous pouvez créer différents types de graphiques avec graphique.js. Pour ce didacticiel, vous commencerez par des graphiques linéaires et à barres. Une fois que vous aurez compris le concept sous-jacent, vous disposerez de tous les outils et de la confiance dont vous avez besoin pour tracer les autres graphiques disponibles.
UTILISEZ LA VIDÉO DU JOUREn rapport:Comment rendre votre site Web réactif et interactif avec CSS et JavaScript
Pour commencer à utiliser graphique.js, créez les fichiers nécessaires. Pour ce didacticiel, les noms de fichiers sont graphique.html, plot.js, et index.css. Vous pouvez utiliser n’importe quelle convention de dénomination pour vos fichiers.
Maintenant, collez ce qui suit dans le diriger section de votre fichier HTML pour créer un lien vers le réseau de distribution de contenu Chart.js (CDN).
Dans graphique.html:
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
</script>
</head>
Ensuite, créez un canevas HTML pour contenir votre graphique et donnez-lui une identifiant. Connectez-vous également au fichier CSS (index.css) dans le diriger section et pointez vers votre fichier JavaScript (plot.js) dans la corps section.
La structure du fichier HTML ressemble à ceci :
<!DOCTYPE HTML>
<html>
<head>
<title>
Chart
</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<header>
<h1>
Charts
</h1>
</header>
<canvas id="plots" style="width:100%;max-width:700px"></canvas>
<script src="plot.js">
</script>
</body>
</htm/>
Et dans votre CSS:
body{
background-color:#383735;
}
h1{
color:#e9f0e9;
margin-left:43%;
}
#plots{
margin:auto;
background-color: #2e2d2d;
}
Le style CSS ci-dessus n’est pas une convention définie. Ainsi, vous pouvez styliser le vôtre comme vous le souhaitez en fonction de votre structure DOM. Une fois vos fichiers HTML et CSS prêts, il est temps de tracer vos graphiques avec JavaScript.
Le graphique linéaire
Pour créer un graphique en courbes avec graphique.js, vous définirez le graphique taper à ligne. Cela indique à la bibliothèque de dessiner un graphique en courbes.
Pour le démontrer, dans votre fichier JavaScript :
// Get the HTML canvas by its id
plots = document.getElementById("plots");
// Example datasets for X and Y-axes
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //Stays on the X-axis
var traffic = [65, 59, 80, 81, 56, 55, 60] //Stays on the Y-axis
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#5e440f',
borderColor: 'white',
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
});
Sortir:
N’hésitez pas à changer le remplir valeur à vrai, utiliser plus de données, ou peaufiner les couleurs pour voir ce qui se passe.
Comme vous pouvez également le voir, il y a une petite boîte de légende en haut du graphique. Vous pouvez supprimer cela dans un fichier facultatif choix paramètre.
le choix Le paramètre aide également avec d’autres personnalisations en plus de supprimer ou d’inclure la légende. Par exemple, vous pouvez l’utiliser pour forcer un axe à démarrer à zéro.
Pour déclarer un choix paramètre, voici à quoi ressemble la section graphique dans votre fichier JavaScript :
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#5e440f', //Color of the dots
borderColor: 'white', //Line color
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
//Specify custom options:
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
//Specify settings for the scales. To make the Y-axis start from zero, for instance:
scales:{
yAxes: [{ticks: {min: 0}}] //You can repeat the same for X-axis if it contains integers.
}
}
});
Sortir:
Vous pouvez également utiliser différentes couleurs d’arrière-plan pour chaque point. Cependant, il est généralement plus utile de faire varier les couleurs d’arrière-plan de cette manière avec les graphiques à barres.
Faire des graphiques à barres avec Chart.js
Ici, il vous suffit de changer le graphique taper à bar. Vous n’avez pas besoin de définir le remplir car les barres héritent automatiquement de la couleur de fond :
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#3bf70c', //Color of the bars
}]
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
}
});
Sortir:
N’hésitez pas à forcer l’axe Y à partir de zéro ou de n’importe quelle valeur comme vous l’avez fait pour le graphique linéaire.
En rapport:Méthodes de tableau JavaScript que vous devez maîtriser
Pour utiliser des couleurs différentes pour chaque barre, transmettez un tableau de couleurs correspondant au nombre d’éléments dans vos données dans le champ Couleur de l’arrière plan paramètre:
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
//Color of each bar:
backgroundColor: [
"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)"],
}]
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
}
});
Sortir:
Faire un camembert avec Chart.js
Pour dessiner un graphique à secteurs, changez le type de graphique en tarte. Vous pouvez également définir l’affichage de la légende sur vrai pour voir ce que chaque segment du gâteau représente :
// Create an instance of Chart object:
new Chart(plots, {
type: 'pie', //Declare the chart type
data: {
labels: months, //Defines each segment
datasets: [{
data: traffic, //Determines segment size
//Color of each segment
backgroundColor: [
"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)"],
}]
},
options:{
legend: {display: true}, //This is true by default.}
});
Sortir:
Comme vous l’avez fait dans les exemples ci-dessus, vous pouvez essayer d’autres graphiques en modifiant le taper.
Néanmoins, voici une liste des supports pris en charge graphique.js types de graphiques que vous pouvez essayer en utilisant les conventions de codage ci-dessus :
- bar
- ligne
- dispersion
- Donut
- tarte
- radar
- zonepolaire
- bulle
Jouez avec Chart.js
Bien que vous ne vous soyez familiarisé qu’avec les graphiques linéaires, à secteurs et à barres dans ce didacticiel, le modèle de code pour tracer d’autres graphiques avec chart.js suit la même convention. Alors n’hésitez pas à jouer avec les autres aussi.
Cela dit, si vous voulez plus que ce que propose chart.js, vous pouvez également jeter un œil à d’autres bibliothèques de graphiques JavaScript.
Il existe de nombreux frameworks JavaScript pour aider au développement. En voici quelques-unes que vous devriez connaître.
Lire la suite
A propos de l’auteur
Idowu Omisola
(126 articles publiés)
Idowu est passionné par tout ce qui concerne les technologies intelligentes et la productivité. Pendant son temps libre, il joue avec le codage et passe à l’échiquier quand il s’ennuie, mais il aime aussi rompre avec la routine de temps en temps. Sa passion pour montrer aux gens le chemin de la technologie moderne le motive à écrire davantage.
Plus de Idowu Omisola
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner
— to www.makeuseof.com
Jeu de briques
Snake
Pacman
Bubble