Share
Dans les quatre derniers tutoriels, vous avez beaucoup appris sur Chart.js. Après avoir lu les quatre premiers tutoriels, vous devriez pouvoir personnaliser les info-bulles et les étiquettes, modifier les polices et créer différents types de graphique. Un aspect de Chart.js qui n’a pas encore été traité dans cette série est celui des échelles..
Les balances ont beaucoup changé depuis la version v1.0 de la bibliothèque et sont maintenant beaucoup plus puissantes. Dans ce tutoriel, vous apprendrez à manipuler des échelles et à en contrôler l’apparence à l’aide des différentes options fournies par la bibliothèque..
Toutes les options de configuration pour les lignes de grille sont imbriquées sous l’option d’échelle dans lignes de grille clé. Cette clé définit des options pour personnaliser les lignes de la grille perpendiculaires aux axes. Modifions les lignes de grille du graphique à courbes que vous avez créé dans le didacticiel sur les graphiques à barres et à barres..
Vous pouvez afficher ou masquer les lignes de grille d’un graphique à l’aide des touches afficher clé. Sa valeur initiale est vrai, les lignes de la grille sont donc affichées par défaut. La couleur des lignes de la grille peut être spécifiée en utilisant le Couleur clé. Si vous souhaitez que les lignes de la grille soient composées de tirets au lieu d'être des lignes continues, vous pouvez fournir une valeur pour la longueur et l'espacement des tirets en tant que valeur du borderDash clé. Vous pouvez définir la largeur et la couleur des lignes pour le premier indice ou zéro à l’aide des touches zeroLineWidth et zeroLineColor touches respectivement.
Jusqu'ici, dans toutes les cartes, les échelles ne contenaient aucun texte descriptif permettant aux spectateurs de savoir ce que représentait un axe particulier. Cela peut rendre les graphiques moins utiles. Par exemple, si vous voyez un graphique de la vitesse d'une voiture et que vous ne pouvez pas déterminer l'unité dans laquelle la vitesse est indiquée sur l'axe des y, le graphique est pratiquement inutile..
Vous pouvez afficher ou masquer les étiquettes d’échelle sur un graphique à l’aide des touches afficher clé. Les étiquettes d'échelle sont masquées par défaut. Le texte devant figurer sur ces échelles peut être spécifié à l'aide de la touche labelString clé. Vous pouvez également contrôler la couleur, la famille, la taille et le style de la police à l’aide des touches couleur de la police, famille de polices, taille de police, et le style de police touches respectivement.
Voici le même tableau de vitesse de voiture ancienne avec un ensemble différent d'options de graphique spécifié.
var chartOptions = légende: display: true, position: 'top', libellés: boxWidth: 80, fontColor: 'black', échelles: xAxes: [gridLines: display: false, couleur: "noir ", scaleLabel: display: true, labelString:" Temps en secondes ", fontColor:" red ", yAxes: [gridLines: color:" black ", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Vitesse en milles par heure", fontColor: "green";
Il y a une autre touche appelée offsetGridLines. Lorsqu'il est réglé sur vrai, il déplace les étiquettes au milieu des lignes de la grille. Ceci est généralement utile lors de la création de graphiques à barres..
Les échelles linéaires sont utilisées pour cartographier les données numériques. Ces échelles peuvent être créées sur l'axe des x ou des y. Dans la plupart des cas, Chart.js détecte automatiquement les valeurs minimale et maximale des échelles. Cependant, cela peut entraîner une certaine confusion.
Supposons que vous vouliez tracer les marques des étudiants dans une classe. Si les notes maximales pour le test étaient de 200 mais qu'aucun des étudiants n'a marqué plus de 180 notes, l'échelle atteindra probablement un maximum de 180. Dans ce cas, les lecteurs n'auront aucun moyen de savoir si les notes maximales étaient de 180 ou 200..
Chart.js a plusieurs options intégrées qui vous permettent de contrôler différentes clés pour les échelles. Vous pouvez spécifier la valeur minimale et maximale des échelles à l’aide des touches min et max clés. Le pas des échelles peut être contrôlé à l’aide des touches taille de pas propriété. De cette façon, vous pouvez déterminer combien de lignes de la grille doivent être tracées sur le graphique. Un autre moyen de limiter le nombre de lignes et de graduations de la grille est d'utiliser le maxTicksLimit clé.
Voici le code permettant de spécifier les valeurs d’échelle minimale et maximale de l’échelle horizontale sur l’histogramme pour un précédent tutoriel de cette série..
var chartOptions = échelles: yAxes: [barPercentage: 0.5, gridLines: display: false], xAxes: [gridLines: zeroLineColor: "noir", zeroLineWidth: 2, ticks: min: 0, max: 6500, step Size: 1300, scaleLabel: display: true, labelString: "Densité en kg / m3", éléments: rectangle: borderSkipped: 'left',;
Tout comme pour l'échelle linéaire, vous pouvez également créer des échelles logarithmiques pour tracer les valeurs sur votre graphique. Dans ce cas, une interpolation logarithmique est utilisée pour déterminer la position d'un point sur les axes. Ces échelles peuvent également être placées à la fois sur l'axe des x et sur l'axe des y.
Ce type d'échelle est utilisé pour les types de cartes radar et de zone polaire. Contrairement à l’échelle linéaire régulière, celle-ci recouvre la surface de la carte au lieu d’être positionnée sur l’axe..
Il y a beaucoup de touches spécifiquement destinées aux échelles radiales. Par exemple, vous pouvez utiliser le lineArc clé pour spécifier si les lignes de la grille doivent être circulaires ou droites. La valeur par défaut est faux pour les cartes radar et vrai pour les cartes des zones polaires.
Vous pouvez contrôler l’apparence des lignes qui irradient du centre du graphique jusqu’à ses étiquettes de point à l’aide des touches suivantes. angleLignes clé. Il accepte un objet comme valeur. L'objet peut contenir des clés permettant de contrôler la couleur et la largeur des lignes d'angle. Vous pouvez masquer les lignes d’angle en définissant la valeur de afficher la clé de faux. La couleur et la largeur des lignes d’angle peuvent être contrôlées à l’aide des touches Couleur et largeur de ligne clés.
L’apparence des étiquettes de points peut être contrôlée à l’aide des touches pointLabels clé. Tout comme les lignes d'angle, cette clé accepte également un objet comme valeur. Veuillez noter que ces options n’ont d’effet que lorsque la valeur de lineArc est réglé sur faux. La couleur, la famille, la taille et le style de police peuvent être spécifiés à l’aide des touches couleur de la police, famille de polices, taille de police, et le style de police clés.
Vous pouvez également définir une valeur minimale et maximale pour l’échelle à l’aide des touches min et max clés. La taille des pas et le nombre maximal de graduations sur l’échelle peuvent être spécifiés à l’aide des touches taille de pas et maxTicksLimit clés. Ces options sont disponibles sous le tiques clé. Quelques autres clés disponibles à l'intérieur tiques sont showLabelBackdrop, couleur de fond, toile de fondPaddingX, et backDropPaddingY. Vous pouvez les utiliser pour afficher ou masquer l’arrière-plan derrière les étiquettes de tick et contrôler sa largeur, sa hauteur et sa couleur..
Vous pouvez également utiliser le lignes de grille clé que nous avons utilisée pour le graphique en courbes pour définir une couleur et une largeur pour les lignes de la grille dans un graphique en radar. Voici quelques options pour créer une carte radar avec des échelles personnalisées.
var chartOptions = scale: gridLines: color: "black", lineWidth: 3, angleLines: display: false, ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels : fontSize: 18, fontColor: "green", légende: position: 'left';
Vous pouvez utiliser une échelle de temps pour afficher les heures et les dates sur un graphique. Comme indiqué dans le didacticiel d'introduction à Chart.js, vous devez inclure Moment.js dans vos projets pour afficher l'heure. L'une des restrictions à l'utilisation d'une échelle de temps est qu'elle ne peut être affichée que sur l'axe des x. Toutes les options de configuration pour l’échelle de temps se trouvent sous le temps sous-option.
Pour créer une échelle de temps, vous devez définir la valeur du type la clé de temps sous le xAxes sous-option. Après cela, vous pouvez définir la valeur de différentes clés sous temps. L'unité à utiliser pour dessiner les ticks est définie à l'aide du bouton unité clé.
Le pas de l’unité peut être spécifié à l’aide des touches unitéStepSize clé. Le format dans lequel les étiquettes des ticks doivent être affichées est spécifié à l'aide de la commande displayFormats sous-option. Vous pouvez en savoir plus sur les formats de chaîne autorisés sur le site Web Moment.js.
Le format d'affichage de l'heure dans les info-bulles peut être spécifié à l'aide du bouton tooltipFormat clé.
Vous pouvez également arrondir le temps avant de le tracer sur le graphique à l’aide des touches rond clé. Soyez prudent lorsque vous définissez une valeur pour rond. Disons que vous définissez sa valeur sur heure et il y a deux fois qui doivent être tracées sur la carte. Si une heure est 5h30 et une autre est 5h50, ils seront tracés tous les deux sur la marque de 5h00. Fixant sa valeur à minute va les tracer sur les marques 5:30 et 5:50 respectivement.
Le graphique linéaire au début du didacticiel peut être tracé à l'aide d'une échelle de temps à l'aide du code suivant..
var chartOptions = légende: affichage: vrai, position: 'top', libellés: boxWidth: 80, fontColor: 'black', échelles: xAxes: [type: "heure", heure: unité: 'hour', unitStepSize: 0.5, round: 'hour', tooltipFormat: "h: mm: ss a", displayFormats: hour: 'MMM D, h: mm A'], yAxes: [gridLines: color: "black", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Vitesse en milles par heure", fontColor: "green";
Ce tutoriel vous a aidé à mieux connaître les différents types d’échelles dans Chart.js. Vous pouvez désormais personnaliser facilement les échelles d'un graphique en contrôlant leur couleur, leur valeur minimale et maximale, leur nombre de ticks et d'autres facteurs similaires..
Après avoir lu les cinq tutoriels de cette série, vous devriez maintenant pouvoir créer toutes sortes de graphiques disponibles dans Chart.js. J'espère que vous avez aimé le tutoriel et la série.
Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons sur le marché Envato. Si vous avez des questions, s'il vous plaît laissez-moi savoir dans les commentaires. Avez-vous déjà utilisé cette bibliothèque dans vos propres projets? S'il vous plaît partager quelques conseils dans les commentaires.
Accentsconagua