Pour créer un graphique en courbes lissées avec Chart.js, prenons l'exemple de deux élèves, A et B, qui ont reçu des notes pour cinq cours.
Dans votre dossier de projet, créez un fichier lg.html. Créez un dossier nommé « css » et ajoutez-y un fichier lg.css à l'intérieur. Ensuite, créez un dossier nommé “js” et ajoutez lg.js fichier. Vous allez créer un graphique en courbes dans ce fichier.
line.html
Incluez les fichiers Chart.js et jQuery dans votre projet. Dans le tête, spécifiez le lg.css fichier.
<link type="text/css" rel="stylesheet" href="css/lg.css" />
Créez un div balise dans le corps HTML et attribuez-lui une classe chart-container à celui-ci. Maintenant, créez un canvas et nommez-le avec un id, comme lg-chartcanvas.
<div class="section__codeStyle">
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
</div>
Enfin, indiquez le fichier JavaScript lg.js. Voici à quoi ressemble votre fichier lg.html dans son ensemble.
<!DOCTYPE html>
<html>
<head>
<title>Comment créer un graphique en courbes</title>
<link type="text/css" rel="stylesheet" href="css/lg.css" />
</head>
<body>
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/line.js"></script>
</body>
</html>
lg.css
Ensuite, vous devez styliser votre html de la page avec du CSS. Ce code définit la largeur, la hauteur et la marge de la classe .chart-container. Ajoutez-y le code suivant.
.chart-container {
width: 70%;
height: 380px;
margin: 0 auto;
}
JavaScript
Il est maintenant temps de nous concentrer sur notre objectif principal : créer un graphique en courbes lissées avec Chart JS.
Tout d'abord, vous devez appeler le canvas en référençant son id lg-chartcanvas.
var getCanvas = $("#lg-chartcanvas");
Vous disposez ici de nombreuses options pour créer le graphique. Pour cela, vous devez générer un opt variable d'objet et modifiez un certain nombre de propriétés. Vous pouvez par exemple modifier responsive vers true afin de rendre votre graphique réactif.
Pour créer le titre du graphique en courbes, vous devez modifier ce qui suit dans le titre objet de données.
- display – Remplacez-le par true afin que le titre s’affiche.
- position – Remplacez-la par haut afin que le titre soit positionné en haut du graphique.
- texte – Remplacez-le par graphique en courbes.
- fontSize – Permet d'ajuster la taille de police du titre
- fontColor – Permet d'ajuster la couleur de police du titre.
Pour ajouter une légende au graphique en courbes, ajustez la propriété suivante dans légende.
- Display – Définissez-le sur true pour afficher la légende.
- Position – Remplacez-la par bottom pour définir la position de la légende.
- Étiquette – Ajustez la couleur et la taille de la police de la légende avec cette option.
//opt
var opt = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Chart",
fontSize: 12,
fontColor: "#222"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#444",
fontSize: 14
}
}
};
Données
Créez un coures variable pour stocker les notes des deux étudiants pour 5 cours. Un tableau étiquettes servira à initialiser le nom des cours tandis que coursesinfo est un tableau composé de deux objets, indiquant les notes de chaque élève.
Éléments dans le coursesinfo sont constitués des propriétés suivantes.
- étiquette – Elle affiche une étiquette lorsque vous survolez ce point avec la souris.
- data – Un tableau qui stocke les notes de chaque élève.
- backgroundColor – Spécifie la valeur hexadécimale des points du graphique en courbes.
- borderColor – Spécifie le nom de la couleur sous forme de valeur hexadécimale.
- fill – Réglez sur false
- lineTension – Il s’agit de la propriété la plus importante, car cette valeur détermine si le graphique sera droit ou courbé. Vous pouvez le rendre courbé en définissant une valeur supérieure à 0.
- radius – Spécifie le rayon d'un point pour les marques de chaque série.
Vous devez générer une variable de graphique pour instancier la classe Chart. Comme le canvas et l'objet data sont stockés dans getCanvas, vous pouvez avoir besoin de la transmettre. L'objet data possède line pour la propriété type, courses variable pour la propriété data et opt pour la propriété options.
Voici le code JavaScript complet.
$(function(){
//appeler le canvas du graphique en courbes depuis le HTML
var getCanvas = $("#line-chartcanvas");
//données dans courses
var courses = {
labels: ["Calculus", "Programming Paradigms", "Data Structures", "Introduction to Relational Databases", "Computer Graphics"],
coursesdata: [{
label: "Student A",
marks: [70, 83, 79, 87, 76],
backgroundColor: "green",
borderColor: "lightblue",
fill: false,
lineTension: 0.4,
radius: 6
},
{
label: "Student B",
marks: [80, 75, 60, 79, 72],
backgroundColor: "red",
borderColor: "lightblue",
fill: false,
lineTension: 0.4,
radius: 6
}]
};
//opt
var opt = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Chart",
fontSize: 16,
fontColor: "#444"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#555",
fontSize: 14
}
}
};
//créer l'objet de la classe Chart
var chart = new Chart(getCanvas, {
type: "line",
marks: marks,
opt : opt
});
});
Vous pouvez convertir cette courbe en ligne droite en réglant la valeur de lineTension à 0.
Conclusion
Maintenant que vous savez comment créer un graphique en courbes lissées, cela vous aidera à améliorer la qualité de votre travail. Pour en savoir plus sur la création de graphiques, consultez ce site web et envoyez-nous un message. Pour découvrir comment combiner une courbe avec un histogramme, voici un bref tutoriel.
