Share
Le précédent tutoriel de cette série avait pour objectif la création de graphiques à courbes et à barres à l’aide de Chart.js. Ces deux graphiques ont leurs propres utilisations et options de configuration, décrites en détail dans le dernier tutoriel..
Dans ce didacticiel, vous découvrirez deux nouveaux types de cartes pouvant être créés à l'aide de Chart.js: les cartes radar et les zones polaires. Comme dans le didacticiel précédent, nous commencerons par un bref aperçu des types de graphique, puis par une discussion plus détaillée..
Les graphiques à courbes et à barres sont utiles lorsque vous souhaitez comparer uniquement une ou deux propriétés d'un grand nombre d'objets, par exemple la population de tous les pays d'Asie ou le nombre de polluants différents dans l'atmosphère..
Supposons que vous souhaitiez comparer la densité, l'opacité, la viscosité, l'indice de réfraction et le point d'ébullition de seulement trois liquides différents. La création d'un graphique à barres pour ces données sera problématique car vous devrez créer cinq colonnes différentes pour chaque liquide. Il sera également difficile de comparer les propriétés correspondantes des liquides.
Dans les situations où vous devez comparer de nombreuses propriétés de quelques objets seulement, la création d'un diagramme radar est la méthode la plus efficace pour visualiser et comparer les données. Ces cartes sont également connues sous le nom de cartes araignée.
D'après Wikipedia, une carte radar est une méthode graphique d'affichage de données multivariées sous la forme d'une carte bidimensionnelle de trois variables quantitatives ou plus, représentées sur des axes partant du même point. Les positions relatives et les angles des axes sont généralement non informatifs.
Créons maintenant notre première carte radar. Les cartes radar sont créées en réglant la type clé dans Chart.js à radar. Voici un exemple très basique.
var radarChart = new Chart (marksCanvas, type: 'radar', données: marksData, options: chartOptions);
Nous allons tracer les notes de deux étudiants d'une classe dans cinq matières différentes. Voici le code pour fournir les données pour créer le graphique.
var marksData = étiquettes: ["anglais", "Maths", "Physique", "Chimie", "Biologie", "Histoire"], jeux de données: [label: "Étudiant A", backgroundColor: "rgba (200, 0,0,0.2) ", données: [65, 75, 70, 80, 60, 80], étiquette:" Student B ", backgroundColor:" rgba (0,0,200,0.2) ", données: [54 , 65, 60, 70, 70, 75]]; var radarChart = new Chart (marksCanvas, type: 'radar', données: marksData);
Le premier graphique que nous créons habituellement ne possède aucune couleur d'arrière-plan définie par nous. Cependant, les cartes radar peuvent se chevaucher, rendant difficile l'identification correcte des points de données sans codage couleur..
Pour cette raison, une couleur a été affectée à chaque jeu de données à l'aide du Couleur de fond clé. La démo suivante montre le résultat final de notre code. Comme vous pouvez le constater, il est désormais très facile de comparer les performances des deux étudiants dans différentes matières..
Outre la couleur d’arrière-plan, vous pouvez également modifier la couleur et la largeur de la bordure du graphique à l’aide des touches couleur de la bordure et largeur de la bordure clés. Il vous est également possible de créer des bordures en pointillés au lieu de lignes continues en utilisant le borderDash clé. Cette clé accepte un tableau comme valeur.
Le premier élément du tableau détermine la longueur des tirets et le deuxième élément détermine l'espace entre eux. Vous pouvez également fournir une valeur de décalage pour dessiner les tirets à l’aide des touches borderDashOffset clé.
Vous pouvez également contrôler la couleur et la largeur de la bordure pour les points tracés à l’aide des touches pointBorderColor et pointBorderWidth. De même, vous pouvez également définir une couleur d’arrière-plan pour différents points à l’aide des touches pointCouleur de fond clé. La taille des points tracés peut être spécifiée en utilisant le point radius clé. Vous pouvez contrôler la distance à laquelle les points doivent commencer à interagir avec la souris à l'aide du bouton pointHitRadius clé.
Vous pouvez également contrôler l'apparence des points tracés en survol à l'aide de la touche pointHoverBackgroundColor, pointHoverBorderColor et pointHoverBorderWidth clés. Une chose dont vous devez vous rappeler est que ces touches de survol n'attendront pas que vous survoliez l'élément pour être déclenché. Les modifications prendront effet dès que vous vous trouvez dans le rayon de frappe défini ci-dessus..
Il y a beaucoup de formes disponibles pour les points tracés. Ils sont circulaires par défaut. Cependant, vous pouvez changer la forme pour Triangle, rect, recté, rectRot, traverser, crossRot, étoile, ligne, et tiret.
Utilisons toutes ces touches pour redessiner la carte radar précédente. Voici le code pour fournir des options de configuration pour les jeux de données et les échelles.
var marksData = étiquettes: ["anglais", "Maths", "Physique", "Chimie", "Biologie", "Histoire"], jeux de données: [étiquette: "Étudiant A", backgroundColor: "transparent", borderColor : "rgba (200,0,0,0.6)", remplissage: faux, rayon: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "orange", pointBorderColor: "rgba (200,0,0,0.6)) , pointHoverRadius: 10, données: [65, 75, 70, 80, 60, 80], étiquette: "Student B", backgroundColor: "transparent", borderColor: "rgba (0,0,200,0.6)", remplissage : false, rayon: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "bleu corbeau", pointBorderColor: "rgba (0,0,200,0.6)", pointHoverRadius: 10, données: [54, 65, 60, 70, 70 , 75]]; var chartOptions = scale: ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels: fontSize: 18, légende: position: 'gauche';
À l'intérieur de chartOptions objet, le min et max les valeurs servent à définir les valeurs minimale et maximale de l'échelle. le taille de pas Cette touche peut être utilisée pour indiquer à Chart.js le nombre d’étapes à suivre pour passer de min à max. Voici le résultat final du code ci-dessus.
Les graphiques de zones polaires sont similaires aux graphiques à secteurs. Deux différences majeures entre ces cartes sont que dans les cartes des zones polaires, tous les secteurs ont des angles égaux et que le rayon de chaque secteur dépend de la valeur tracée. Ces graphiques sont utilisés pour tracer les phénomènes cycliques. Par exemple, vous pouvez l’utiliser pour tracer le nombre d’oiseaux migrateurs d’une espèce donnée dans votre région à chaque saison de l’année..
Le rayon de chaque secteur de ces graphiques est proportionnel à la racine carrée du nombre d'objets correspondants. Dans le cas des oiseaux migrateurs, le rayon sera proportionnel à la racine carrée du nombre d'oiseaux dans votre région..
Vous pouvez créer des graphiques de zones polaires dans Chart.js en définissant la type la clé de polarArea. Voici le code de base dont vous avez besoin pour créer un diagramme polaire.
var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', données: birdsData, options: chartOptions);
Voici le code pour tracer le nombre d'oiseaux migrateurs sur un graphique de la zone polaire. Les seules données fournies à ce stade sont le nombre d'oiseaux et la couleur de fond pour différentes saisons..
var birdsData = labels: ["Spring", "Summer", "Fall", "Winter"], jeux de données: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0.5) "," rgba (100, 255, 0, 0.5) "," rgba (200, 50, 255, 0.5) "," rgba (0, 100, 255, 0.5) "]; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', données: birdsData);
Le code ci-dessus créera le diagramme de zone polaire suivant.
Le graphique de la zone polaire fournit les options habituelles pour définir Couleur de fond, largeur de la bordure, couleur de la bordure, hoverBackgroundColor, hoverBorderWidth, et hoverBorderColor. Vous pouvez également utiliser certaines touches spécifiques au graphique de la zone polaire pour personnaliser leur apparence..
Par exemple, vous pouvez définir l’angle de départ pour la première valeur du jeu de données à l’aide des touches startAngle clé. De même, le lineArc clé qui se trouve sous échelle peut être utilisé pour spécifier si les lignes tracées doivent être circulaires ou non en définissant sa valeur sur vrai ou faux respectivement.
Les secteurs dessinés dans le graphique de la zone polaire sont à la fois pivotés et mis à l'échelle par défaut. Cependant, vous pouvez empêcher l’animation de mise à l’échelle en définissant la valeur de animateScale clé à faux. De même, l’animation rotative peut être désactivée en définissant la valeur du paramètre animateRotate clé à faux. Ces deux clés sont disponibles sous animation.
Le code ci-dessous modifie la valeur de quelques clés pour rendre le graphique plus attrayant..
var birdsData = labels: ["Spring", "Summer", "Fall", "Winter"], jeux de données: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0.6) "," rgba (0, 255,200, 0.6) "," rgba (200, 0, 200, 0.6) "," rgba (0, 255, 0, 0.6) "], borderColor:" rgba (0 , 0, 0, 0.8) "]; var chartOptions = startAngle: -Math.PI / 4, légende: position: 'left', animation: animateRotate: false; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', données: birdsData, options: chartOptions);
Outre la rotation du graphique et la désactivation de l'animation de rotation, nous avons également déplacé la légende vers la gauche du graphique en définissant la valeur de position à la gauche. Cela laisse suffisamment d'espace en haut du graphique pour l'afficher correctement..
Dans ce tutoriel, vous avez découvert les applications des cartes radar et des zones polaires. Vous avez ensuite appris à créer et à personnaliser des graphiques de base à l’aide des diverses options de configuration disponibles dans Chart.js. Vous en apprendrez davantage sur les graphiques à secteurs et à bulles dans la prochaine partie de la série..
Si vous travaillez avec le Web, en particulier sur le front-end, il est important de connaître JavaScript. Bien sûr, ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Si vous avez des questions sur ce tutoriel, merci de me le faire savoir dans les commentaires..
Accentsconagua