Share
Jusqu'ici, vous avez appris quatre types de graphiques différents dans Chart.js. Le deuxième tutoriel de la série couvrait les graphiques en courbes et à barres. Le troisième tutoriel a porté sur les cartes radar et les zones polaires. Dans ce didacticiel, vous apprendrez à utiliser Chart.js pour créer des graphiques à secteurs, en anneau et à bulles..
Les diagrammes à secteurs et en anneau sont utiles lorsque vous souhaitez indiquer la proportion dans laquelle quelque chose est divisé entre différentes entités. Par exemple, vous pouvez utiliser des diagrammes à secteurs pour indiquer le pourcentage d'hommes, de femmes et de jeunes lions dans un parc animalier ou le pourcentage de votes obtenus par différents candidats lors d'une élection..
Les graphiques à secteurs ne sont utiles que lorsque vous souhaitez comparer un paramètre spécifique ou un ensemble de données. Il est important de garder à l'esprit que vous ne pouvez pas utiliser de graphiques à secteurs pour tracer des entités dont la valeur est zéro, car l'angle des secteurs d'un graphique à secteurs dépend de la magnitude des points de données..
Cela signifie que toute entité dont la part est égale à zéro ne sera pas affichée sur le graphique. De même, vous ne pouvez pas tracer de valeurs négatives sur un graphique à secteurs. Vous pouvez créer des graphiques à secteurs dans Chart.js en définissant la type la clé de tarte. De même, vous pouvez créer des graphiques en anneau en définissant la type la clé de Donut. Voici un exemple de création de ces deux graphiques:
var pieChart = new Chart (votesCanvas, type: 'pie', données: votesData, options: chartOptions); var doughnutChart = new Chart (votesCanvas, type: 'donut', données: votesData, options: chartOptions);
Créons un graphique à secteurs montrant les données sur les exportations de pétrole des cinq principaux pays en 2015. Les données sont en milliards de dollars américains..
var data = labels: ["Arabie Saoudite", "Russie", "Irak", "Emirats Arabes Unis", "Canada"], jeux de données: [données: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"]];
Vous pouvez contrôler l’apparence du graphique ci-dessus en utilisant différentes touches comme pourcentage de coupe, qui définit le pourcentage du graphique qui est coupé du milieu. Vous pouvez également spécifier l’angle de départ du graphique à l’aide des touches rotation clé. De même, vous pouvez également spécifier l’angle que le graphique balaye lors du traçage des données à l’aide des touches circonférence clé.
Deux animations différentes peuvent être activées lors du tracé d’un graphique. Vous pouvez spécifier si le graphique doit avoir une animation de rotation à l'aide de la touche animateRotate clé. De même, vous pouvez également spécifier si le graphique en anneau doit être mis à l'échelle à partir du centre à l'aide de la touche animateScale clé. La valeur de animateRotate est réglé sur vrai par défaut, et la valeur pour animateScale est réglé sur faux par défaut.
Comme d'habitude, vous pouvez contrôler la couleur d'arrière-plan, la couleur et la largeur de la bordure de tous les points de données à l'aide de la commande Couleur de fond, couleur de la bordure, et largeur de la bordure touches respectivement. De même, les valeurs de survol de toutes ces propriétés peuvent être contrôlées à l'aide de la hoverBackgroundColor, hoverBorderColor, et hoverBorderWidth clés.
Voici le code pour créer un graphique en anneau pour les données ci-dessus. Définir la valeur pour rotation égal à -Math.PI prend ce point de départ à 180 degrés dans le sens anti-horaire. Puis, définissant la valeur de circonférence à Math.PI fait que la carte couvre seulement un demi-cercle.
var oilData = labels: ["Arabie Saoudite", "Russie", "Irak", "Emirats Arabes Unis", "Canada"], jeux de données: [données: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"], borderColor: "noir", borderWidth: 2]; var chartOptions = rotation: -Math.PI, cutoutPercentage: 30, circonférence: Math.PI, légende: position: 'gauche', animation: animateRotate: false, animateScale: true;
Les graphiques à bulles servent à tracer ou à afficher trois dimensions (p1, p2, p3) de données sur un graphique. La position et la taille des bulles déterminent la valeur de ces trois points de données. L’axe horizontal représente le premier point de données (p1), l’axe vertical représente le deuxième point de données (p2), et l’aire de la bulle est utilisée pour représenter la valeur du troisième point de données (p3).
Il convient de garder à l’esprit que le troisième point de données n’est pas représenté par le rayon des bulles mais par leur surface. Maintenant, l'aire d'un cercle est proportionnelle au carré du rayon. Cela signifie que vous devez vous assurer que le rayon de la bulle que vous tracez est proportionnel à la racine carrée de la magnitude du troisième point de données..
Vous pouvez créer des graphiques à bulles dans Chart.js en définissant la valeur du type la clé de bulle. Voici un exemple de création d'un graphique à bulles.
var bubbleChart = new Chart (popCanvas, type: 'bubble', données: popData, options: chartOptions);
Nous allons tracer le poids des différents articles conservés dans une pièce en utilisant un graphique à bulles. Les données du graphique doivent être transmises sous la forme d'un objet. L’objet de données doit avoir l’interface suivante pour pouvoir être tracé correctement.
X:, y: , r:
Une différence importante entre les graphiques à bulles et tous les autres graphiques est que le rayon de la bulle n’est pas mis à l’échelle avec le graphique..
Par exemple, la largeur des barres d'un graphique à barres peut augmenter ou diminuer en fonction de la taille du graphique. La même chose ne se produit pas avec les graphiques à bulles. Le rayon des bulles est toujours égal au nombre exact de pixels que vous avez spécifié. Cela a du sens car dans ce type de graphique, le rayon est utilisé pour représenter des données réelles.
Créons un diagramme à bulles pour représenter la population de cerfs à différents endroits dans une forêt..
var popData = jeux de données: [label: ['population de daims']], données: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# FF9966";
Le rayon étant ici proportionnel à la racine carrée de la magnitude réelle, le nombre de cerfs en (80, 80) est 100 fois supérieur au nombre de cerfs en (0, 100)..
Comme pour tous les autres types de graphique, vous pouvez contrôler la couleur d'arrière-plan, la couleur de la bordure et la largeur de la bordure des points tracés à l'aide de la commande Couleur de fond, couleur de la bordure, et largeur de la bordure clés. De même, vous pouvez également spécifier la couleur d'arrière-plan du survol, la couleur de la bordure et la largeur de celle-ci à l'aide de la commande hoverBackgroundColor, hoverBorderColor, et hoverBorderWidth clés.
Vous pouvez également spécifier le rayon supplémentaire que vous souhaitez ajouter à différentes bulles en survol à l'aide de la touche hoverRadius clé. Rappelez-vous que ce rayon est ajouté à la valeur d'origine pour dessiner la bulle survolée. Si la bulle originale avait un rayon de 10 et hoverRadius est réglé sur 5, le rayon de la bulle en vol stationnaire sera égal à 15.
var popData = jeux de données: [label: ['population de daims']], données: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# 9966FF", hoverBackgroundColor: "# 000000", hoverBorderColor: "# 9966FF", hoverBorderWidth: 5, hoverRadius: 5];
Les paramètres ci-dessus créeront le graphique à bulles suivant.
Dans ce didacticiel, vous avez découvert trois autres types de graphiques disponibles dans Chart.js. Vous devriez maintenant pouvoir choisir le type de graphique approprié pour tracer vos données et définir des valeurs spécifiques pour différentes clés afin de contrôler leur apparence. Dans le prochain tutoriel, vous apprendrez à manipuler les échelles pour différents types de graphiques.
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