Share
Dans le premier tutoriel d'introduction à la série Chart.js, vous avez appris à installer et à utiliser Chart.js dans un projet. Vous avez également découvert certaines options de configuration globales pouvant être utilisées pour modifier les polices et les info-bulles de différents graphiques. Dans ce tutoriel, vous allez apprendre à créer des graphiques à courbes et à barres dans Chart.js..
Les graphiques linéaires sont utiles lorsque vous souhaitez afficher les changements de valeur d'une variable donnée par rapport aux changements d'une autre variable. L'autre variable est généralement le temps. Par exemple, des graphiques linéaires peuvent être utilisés pour montrer la vitesse d'un véhicule pendant des intervalles de temps spécifiques.
Chart.js vous permet de créer des graphiques à courbes en définissant la type la clé de ligne. Voici un exemple:
var lineChart = new Chart (speedCanvas, type: 'ligne', data: speedData, options: chartOptions);
Nous allons maintenant fournir les données ainsi que les options de configuration nécessaires pour tracer le graphique en courbes..
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], jeux de données: [label: "Vitesse de la voiture", data: [ 0, 59, 75, 20, 20, 55, 40],]; var chartOptions = légende: display: true, position: 'top', libellés: boxWidth: 80, fontColor: 'black';
Comme nous n’avons fourni aucune couleur pour le graphique à courbes, la couleur par défaut rgba (0,0,0,0,1) sera utilisé. Nous n'avons apporté aucune modification à l'info-bulle ou à la légende. Vous pouvez en savoir plus sur la modification de la taille de la caisse, de l'info-bulle ou de la légende dans la première partie de la série..
Dans cette partie, nous nous concentrerons sur différentes options spécifiquement disponibles pour modifier les graphiques linéaires. Toutes les options et données que nous avons fournies ci-dessus créeront le tableau suivant.
La couleur de l’aire sous la courbe est déterminée par le Couleur de fond clé. Tous les graphiques linéaires dessinés à l'aide de cette méthode seront remplis avec la couleur donnée. Vous pouvez définir la valeur du remplir la clé de faux si vous voulez seulement tracer une ligne et ne pas la remplir de couleur.
Une autre chose que vous avez peut-être remarquée est que nous utilisons des points de données discrets pour tracer le graphique. La bibliothèque interpole automatiquement les valeurs de tous les autres points en utilisant des algorithmes intégrés.
Par défaut, les points sont tracés à l'aide d'une interpolation cubique pondérée personnalisée. Cependant, vous pouvez également définir la valeur de cubicInterpolationMode la clé de monotone pour tracer les points plus précisément lorsque le graphique que vous tracez est défini par l'équation y = f (x). La tension de la courbe de Bézier est déterminée par la lineTension clé. Vous pouvez définir sa valeur sur zéro pour tracer des lignes droites. Veuillez noter que cette clé est ignorée lorsque la valeur de cubicInterpolationMode a déjà été spécifié.
Vous pouvez également définir la valeur de la couleur de la bordure et sa largeur à l’aide des touches couleur de la bordure et largeur de la bordure clés. Si vous souhaitez tracer le graphique en utilisant une ligne pointillée au lieu d'une ligne continue, vous pouvez utiliser le borderDash clé. Il accepte comme valeur un tableau dont les éléments déterminent respectivement la longueur et l'espacement des tirets..
L’aspect des points tracés peut être contrôlé à l’aide de la touche pointBorderColor, pointCouleur de fond, pointBorderWidth, point radius, et pointHoverRadius Propriétés. Il y a aussi pointHitRadius clé, qui détermine la distance à laquelle les points tracés commenceront à interagir avec la souris.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], jeux de données: [label: "Vitesse de la voiture", data: [ 0, 59, 75, 20, 20, 55, 40], lineTension: 0, remplissage: false, borderColor: 'orange', backgroundColor: 'transparent', borderDash: [5, 5], pointBorderColor: 'orange', pointBackgroundColor : 'rgba (255,150,0,0.5)', pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: 'rectRounded'];
Ce qui précède speedData objet parcourt les mêmes points de données que le graphique précédent mais avec des valeurs personnalisées définies pour toutes les propriétés.
Vous pouvez également tracer plusieurs lignes sur un même graphique et fournir différentes options pour les dessiner comme suit:
var dataFirst = label: "Voiture A - Vitesse (mph)", données: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Définir plus d'options; var dataSecond = label: "Voiture B - Vitesse (mi / h)", données: [20, 15, 60, 60, 65, 30, 70], // Définir plus d'options; var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s",], ensembles de données: [dataFirst, dataSecond]; var lineChart = new Chart (speedCanvas, type: 'line', data: speedData);
Les graphiques à barres sont utiles lorsque vous souhaitez comparer un seul indicateur pour différentes entités, par exemple le nombre de voitures vendues par différentes sociétés ou le nombre de personnes appartenant à certains groupes d'âge dans une ville. Vous pouvez créer des graphiques à barres dans Chart.js en définissant la type la clé de bar. Par défaut, cela créera des graphiques avec des barres verticales. Si vous souhaitez créer des graphiques avec des barres horizontales, vous devez définir la type à barre horizontale.
var barChart = new Chart (densitéCanvas, type: 'bar', données: densitéData, options: chartOptions);
Créons un diagramme à barres qui représente la densité de toutes les planètes de notre système solaire. Les données de densité proviennent de la fiche de renseignements sur les planètes fournie par la NASA..
densité de var = étiquette: 'Densité des planètes (kg / m3)', données: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]; var barChart = new Chart (densitéCanvas, type: 'bar', données: étiquettes: ["Mercure", "Vénus", "Terre", "Mars", "Jupiter", "Saturne", "Uranus", " Neptune "], jeux de données: [densitéData]);
Les paramètres fournis ci-dessus créeront le graphique suivant:
Tout comme le graphique en courbes, les barres sont également remplies d'une couleur gris clair. Vous pouvez changer la couleur des barres en utilisant le bouton Couleur de fond clé. De même, la couleur et la largeur des bordures de différentes barres peuvent être spécifiées à l’aide des touches couleur de la bordure et largeur de la bordure clés.
Si vous voulez que la bibliothèque ignore de dessiner la bordure pour un bord particulier, vous pouvez spécifier ce bord comme valeur de la valeur. borderSkipped clé. Vous pouvez définir sa valeur sur Haut, la gauche, bas, ou droite. Vous pouvez également modifier la couleur de la bordure et de l’arrière-plan de différentes barres lorsqu'elles sont survolées à l’aide des touches hoverBorderColor et hoverBackgroundColor clé.
Les barres dans l'histogramme ci-dessus ont été automatiquement dimensionnées. Cependant, vous pouvez contrôler la largeur de chaque barre à l’aide des touches barépaisseur et barPourcentage Propriétés. le barépaisseur la touche sert à définir l'épaisseur des barres en pixels, et barPourcentage est utilisé pour définir l'épaisseur en pourcentage de la largeur de la catégorie disponible.
Vous pouvez également afficher ou masquer un axe particulier à l'aide de sa afficher clé. Définir la valeur de afficher à faux va cacher cet axe particulier. Vous pouvez en savoir plus sur toutes ces options sur la page de documentation.
Rendons le graphique de densité plus intéressant en remplaçant les valeurs par défaut des graphiques à barres à l'aide du code suivant.
var densitéData = label: 'Densité des planètes (kg / m3)', données: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: ['rgba (0, 99, 132, 0.6 ) ',' rgba (30, 99, 132, 0.6) ',' rgba (60, 99, 132, 0.6) ',' rgba (90, 99, 132, 0.6) ',' rgba (120, 99, 132 , 0.6) ',' rgba (150, 99, 132, 0.6) ',' rgba (180, 99, 132, 0.6) ',' rgba (210, 99, 132, 0.6) ',' rgba (240, 99 , 132, 0.6) '], borderColor: [' rgba (0, 99, 132, 1) ',' rgba (30, 99, 132, 1) ',' rgba (60, 99, 132, 1) ', 'rgba (90, 99, 132, 1)', 'rgba (120, 99, 132, 1)', 'rgba (150, 99, 132, 1)', 'rgba (180, 99, 132, 1) ',' rgba (210, 99, 132, 1) ',' rgba (240, 99, 132, 1) '], borderWidth: 2, hoverBorderWidth: 0; var chartOptions = échelles: yAxes: [barPercentage: 0.5], éléments: rectangle: borderSkipped: 'left',; var barChart = new Chart (densitéCanvas, type: 'barre horizontale', données: étiquettes: ["Mercure", "Vénus", "Terre", "Mars", "Jupiter", "Saturne", "Uranus", " Neptune "], jeux de données: [densityData],, options: chartOptions);
le DensitéDonnées objet est utilisé pour définir la bordure et la couleur d'arrière-plan des barres. Il y a deux choses à noter dans le code ci-dessus. Premièrement, les valeurs de la barPourcentage et borderSkipped propriétés ont été définies à l'intérieur du chartOptions objet au lieu de dataDensity objet.
Deuxièmement, la carte type a été mis à barre horizontale cette fois. Cela signifie également que vous devrez changer la valeur de barépaisseur et barPourcentage pour l'axe des ordonnées au lieu de l'axe des abscisses pour qu'ils aient un effet sur les barres.
Les paramètres fournis ci-dessus créeront l'histogramme suivant.
Vous pouvez également tracer plusieurs jeux de données sur le même graphique en affectant une identifiant de l'axe correspondant à un ensemble de données particulier. le xAxisID la touche est utilisée pour assigner le identifiant de n'importe quel axe x à votre jeu de données. De même, le yAxisID la touche est utilisée pour assigner le identifiant de n'importe quel axe y à votre jeu de données. Les deux axes ont également un identifiant clé que vous pouvez utiliser pour leur attribuer des identifiants uniques.
Si le dernier paragraphe était un peu déroutant, l'exemple suivant aidera à clarifier les choses.
var densitéData = étiquette: 'Densité de la planète (kg / m3)', données: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: 'rgba (0, 99, 132, 0.6) ', borderColor:' rgba (0, 99, 132, 1) ', yAxisID: "densité d'axe des ordonnées"; var gravityData = label: 'Gravité de la planète (m / s2)', données: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0], backgroundColor: 'rgba (99, 132, 0, 0.6) ', borderColor:' rgba (99, 132, 0, 1) ', yAxisID: "y-axis-gravity"; var planetData = étiquettes: ["Mercure", "Vénus", "Terre", "Mars", "Jupiter", "Saturne", "Uranus", "Neptune"], ensembles de données: [densitéData, gravityData]; var chartOptions = scale: xAxes: [barPercentage: 1, categoryPercentage: 0.6], yAxes: [id: "densité d'axe des y", id: "gravité d'axe des y" ; var barChart = new Chart (densitéCanvas, type: 'bar', données: planetData, options: chartOptions);
Ici, nous avons créé deux axes y avec des identifiants uniques. Ils ont été attribués à des jeux de données individuels à l’aide de la yAxisID clé. le barPourcentage et catégoriePourcentage Des clés ont été utilisées ici pour regrouper les barres de planètes individuelles. Réglage catégoriePourcentage à une valeur inférieure augmente l'espace entre les barres de différentes planètes. De même, la mise barPourcentage à une valeur plus élevée réduit l'espace entre les barres de la même planète.
Dans ce didacticiel, nous avons couvert tous les aspects des graphiques à courbes et à barres dans Chart.js. Vous devriez maintenant pouvoir créer des graphiques de base, modifier leur apparence et tracer plusieurs jeux de données sur le même graphique sans aucun problème. Dans la prochaine partie de la série, vous découvrirez les cartes de radar et de zone polaire dans Chart.js.
J'espère que vous avez aimé ce tutoriel. Si vous avez des questions, s'il vous plaît laissez-moi savoir dans les commentaires.
Accentsconagua