Explication détaillée des options de configuration Highcharts

Highcharts propose un grand nombre d'options de configuration et de paramètres, ce qui vous permet de personnaliser facilement les graphiques pour répondre aux exigences des utilisateurs. Ce chapitre présente en détail les instructions d'utilisation des options de configuration Highcharts.

Configuration des paramètres (attributs + événements)

  1. chart.events.addSeries : Ajouter une série au graphique.

  2. chart.events.click : L'événement de clic qui se produit sur la zone de tracé de l'ensemble du graphique.

  3. chart.events.load : Événement de chargement du graphique.

  4. chart.events.redraw : L'événement de redessin du graphique, qui peut être déclenché en cliquant sur la légende pour afficher ou masquer les tracés.

  5. chart.events.selection : Lorsque la courbe du graphique peut être sélectionnée pour un zoom, cet événement peut être déclenché lorsqu'une opération de sélection sur le graphique est effectuée.

  6. chart.height : La valeur de hauteur du graphique à dessiner.

  7. chart.inverted : Permuter les axes x et y dans le graphique.

  8. chart.polar : Indique s'il s'agit d'un graphique polaire.

  9. chart.reflow: Lorsque la taille de la fenêtre change, la largeur du graphique s'adapte au changement de taille de la fenêtre.

  10. chart.renderTo: L'emplacement où le graphique est chargé, qui est un objet DOM sur la page.

  11. chart.showAxes: Indique s'il faut afficher les axes dans un graphique vide.

  12. chart.type: Le type du graphique, par défaut line, et inclut égalementbar/column/pie……

  13. chart.width: La largeur de la zone de traçage du graphique, par défaut auto-adaptative.

  14. chart.zoomType: Le type de zoom pour les rapports de données dans le graphique. Il peut être zoomé le long de l'axe X, ou de l'axe Y, ou simultanément sur les deux axes XY.

  15. colors: Lorsqu'il y a plusieurs séries dans le graphique, les couleurs entre chaque série de données. C'est un tableau, généralement laissé inchangé.

  16. credits.enabled: Indique s'il faut autoriser l'affichage des informations de copyright.

  17. credits.href: Lien pour le copyright.

  18. credits.text: Le texte affiché pour les informations de copyright.

  19. exporting.buttons.exportButton.enabled: Indique s'il faut autoriser l'affichage du bouton d'exportation.

  20. exporting.buttons.exportButton.menuItems: Les options de menu du bouton d'exportation.

  21. exporting.buttons.exportButton.onclick : Événement déclenché lorsque le bouton d'exportation est cliqué, et non le menu interne.

  22. exporting.buttons.printButton.enabled : Indique si le bouton d'impression est autorisé.

  23. exporting.buttons.printButton.onclick : L'événement de clic du bouton d'impression.

  24. exporting.enabled : Indique si les boutons d'impression et d'exportation sont activés.

  25. exporting.filename : Nom du fichier exporté.

  26. exporting.type : Format de fichier de l'image exportée par défaut.

  27. exporting.url : Adresse de traitement de l'interface pour convertir et exporter les graphiques SVG.

  28. exporting.width : Largeur de l'image exportée par défaut. (Remarque : le texte original contenait une faute de frappe "exporing.width")

  29. labelsÉtiquettes : Peut être chargé à n'importe quelle position dans le graphique, contenant des éléments et du style.

  30. lang : Configuration des paramètres de langue, y compris les configurations liées au menu du bouton d'exportation, les configurations des noms temporels, etc.

  31. legend.enabled : Indique si la légende est activée.

  32. navigation.buttonOptions.enabled : Indique si les boutons de toute la navigation du graphique peuvent être cliqués.

  33. plotOptions.area.allowPointSelect: Indique s'il faut autoriser le clic sur les points de données.

  34. plotOptions.area.color: La couleur du tracé.

  35. plotOptions.area.dataLabels.enabled: Indique si les étiquettes de données sont autorisées.

  36. plotOptions.area.enableMouseTracking: Indique s'il faut autoriser l'affichage de bulle du suivi de la souris pour les points de données dans le graphique de données.

  37. plotOptions.area.events.checkboxClick: Événement de clic pour la case à cocher dans la légende du graphique de données.

  38. plotOptions.area.events.click: Événement de clic pour les points de données dans le graphique de données.

  39. plotOptions.area.events.hide: L'événement lorsqu'une série de données est masquée dans le graphique de données.

  40. plotOptions.area.events.show: L'événement lorsqu'une série de données est affichée dans le graphique de données.

  41. plotOptions.area.events.legendItemClick: L'événement lorsqu'un élément de la légende est cliqué dans le graphique de données. S'il est directement défini sur false, il ne peut pas être cliqué.

  42. plotOptions.area.events.mouseOut: Événement de sortie de la souris pour les points de données.

  43. plotOptions.area.events.mouseOver: Événement de survol de la souris pour les points de données.

  44. plotOptions.area.marker.enabled: Indique s'il faut afficher les marqueurs de points dans la zone de traçage du graphique.

  45. plotOptions.area.marker.states.hover.enabled: Indique s'il faut autoriser l'état de survol des marqueurs.

  46. plotOptions.area.marker.states.select.enabled: Indique s'il faut autoriser l'état de sélection.

  47. plotOptions.area.point.events.click: Événement de clic pour chaque point individuel du graphique.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events.mouseOver

  50. plotOptions.area.point.events.remove: Événement lorsqu'un point est supprimé du graphique.

  51. plotOptions.area.point.events.select: Événement de sélection d'un point dans le graphique.

  52. plotOptions.area.point.events.unselect: Événement lorsqu'un point est désélectionné dans le graphique.

  53. plotOptions.area.point.events.update: Événement déclenché lorsque les données du graphique sont mises à jour.

  54. plotOptions.area.visible: Indique si la série de données est affichée ou masquée par défaut au chargement.

  55. plotOptions.area.zIndex: En cas de séries multiples, ajuste l'ordre d'empilement de chaque série.

  56. Les point.events ci-dessus s'appliquent également aux autres graphiques de type aire (arearange, areaspline, areasplinerange), aux autres graphiques en barres (bar, column) et à tous les graphiques.

  57. plotOptions.area.showInLegend : Indique s'il faut l'afficher dans la légende.

  58. plotOptions.area.stacking : Indique s'il faut empiler par valeur ou par pourcentage.

  59. plotOptions.area.states.hover.enabled : Indique si l'état de survol est autorisé.

  60. plotOptions.area.stickyTracking : Suivi collant des points de données par la souris.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange sont similaires à plotOptions.area.

  62. plotOptions.bar.groupPadding : L'intervalle entre chaque groupe dans un groupement de graphique à barres.

  63. plotOptions.bar.grouping : Indique s'il faut regrouper les données.

  64. plotOptions.bar.minPointLength : Définit la longueur minimale d'un point lorsque sa valeur est zéro.

  65. plotOptions.bar.showInLegend : Indique s'il faut l'afficher dans la légende.

  66. plotOptions.bar.stacking : Indique s'il faut empiler par valeur ou par pourcentage (normal/percent).

  67. plotOptions.column et plotOptions.columnrange sont similaires à plotOptions.bar.

  68. La configuration plotOptions.line est similaire à la configuration plotOptions.area.

  69. plotOptions.pie.ignoreHiddenPoint : Dans un diagramme circulaire, après qu'une série est masquée en cliquant sur la légende, indique si l'ensemble du diagramme circulaire est redistribué à 100 % ou si la partie masquée est simplement cachée en fonction du diagramme d'origine, présentant un espace vide.

  70. plotOptions.pie.innerSize : Quelle quantité d'espace vide est réservée au centre du diagramme circulaire lors de son dessin.

  71. plotOptions.pie.slicedOffset : Utilisé conjointement avec allowPointSelect. Lorsqu'un point est cliqué, le secteur correspondant est détaché. Ce paramètre configure la distance de décalage.

  72. Les autres paramètres de configuration courants de plotOptions.pie sont similaires à ceux de plotOptions.area ; les configurations associées de plotOptions.scatter, plotOptions.series et plotOptions.spline sont similaires à la configuration de plotOptions.area.

  73. series: est un tableau.

  74. series.data.color : La couleur d'un point de données particulier.

  75. series.data.dataLabels : L'étiquette de données d'un point de données spécifique dans une série.

  76. series.data.events est similaire à la configuration de plotOptions.area.point.events.

  77. series.data.marker est similaire à la configuration de plotOptions.area.marker.

  78. series.data.name : Configure le nom du point de données.

  79. series.data.sliced : Configure la distance de séparation des secteurs dans un diagramme circulaire.

  80. series.data.x : la valeur x du point.

  81. series.data.y: la valeur y du point.

  82. series.name: Le nom de la série de données.

  83. series.stack: L'index de regroupement pour l'empilement.

  84. series.type: Le type d'affichage de la série de données.

  85. series.xAxis, series.yAxis: Lors de l'utilisation de plusieurs axes, spécifie à quel axe correspond une série de données.

  86. subtitle: Configurer le sous-titre du graphique.

  87. title: Configurer le titre du graphique.

  88. tooltip: Configurer l'infobulle pour les données du graphique.

  89. tooltip.valueDecimals: Nombre de décimales autorisées.

  90. tooltip.percentageDecimals: Nombre de décimales autorisées pour les pourcentages.

  91. xAxis, yAxis : la configuration définit l'axe

  92. allowDecimals: Indique si les décimales sont autorisées sur l'axe.

  93. categories: Un tableau, les catégories de l'axe.

  94. plotLines: Dessine les lignes principales.

  95. tickColor: Couleur des graduations.

  96. tickInterval: Valeur du pas pour les graduations.

  97. labels.rotation: Degrés de rotation des étiquettes de graduation.

Chart: Options de la zone de graphique

Les options de zone de graphique de Chart servent à définir les propriétés liées à la zone de graphique.

Paramètre Description Valeur par défaut
backgroundColor Définir la couleur d'arrière-plan de la zone de graphique #FFFFFF
borderWidth Définir la largeur de la bordure du graphique 0
borderRadius Définir le rayon des coins de la bordure du graphique 5
renderTo Le conteneur dans lequel le graphique est placé. Généralement, un DIV est placé dans le HTML, en récupérant la valeur de l'attribut id du DIV. null
defaultSeriesType Les types de graphique par défaut sont line, spline, area, areaspline, column, bar, pie, scatter. 0
width La largeur du graphique, qui s'adapte par défaut à la largeur du conteneur du graphique. null
height La hauteur du graphique, qui s'adapte par défaut à la hauteur du conteneur du graphique. null
margin Définit l'espacement entre le graphique et les autres éléments, un tableau, tel que [0,0,0,0]. [null]
plotBackgroundColor La couleur d'arrière-plan de la zone principale du graphique, c'est-à-dire la couleur d'arrière-plan de la zone délimitée par les axes X et Y. null
plotBorderColor La couleur de bordure de la zone principale du graphique, c'est-à-dire la couleur de bordure de la zone délimitée par les axes X et Y. null
plotBorderWidth La largeur de bordure de la zone principale du graphique 0
shadow Indique s'il faut définir une ombre ; backgroundColor doit être défini. false
reflow Indique s'il faut adapter automatiquement la hauteur et la largeur de la zone du graphique. Si la largeur et la hauteur ne sont pas définies, il s'adaptera à la taille. vrai
zoomType Faites glisser la souris pour zoomer, en effectuant une mise à l'échelle le long de l'axe des x ou de l'axe des y, ce qui peut être défini sur : 'x', 'y', 'xy'. ''
events Rappels d'événements, prenant en charge les fonctions de rappel pour la méthode addSeries, la méthode click, la méthode load, la méthode selection, etc.  

Color : options de couleur

L'option Color est utilisée pour définir la palette de couleurs du graphique.

Paramètre Description Valeur par défaut
color Utilisé pour afficher les couleurs des graphiques tels que les graphiques en courbes/colonnes/circulaires, sous forme de tableau. array

Highcharts fournit déjà plusieurs jeux de couleurs par défaut. Lorsque les éléments graphiques à afficher dépassent le nombre de types de couleurs, les éléments graphiques supplémentaires commenceront automatiquement à sélectionner à partir du premier jeu de couleurs. Méthode de personnalisation des jeux de couleurs :

Highcharts.setOptions({
    colors: ['#058DC7', '#3273B4', '#ED561B', '#DDDF00', '#24CBE5', '#64A4E5', '#FF9655',
'#FFF263', '#6AB2F9']
});

Titre : Options du titre

Les options du titre sont utilisées pour définir les propriétés liées au titre du graphique.

Paramètre Description Valeur par défaut
text Contenu du texte du titre. Titre du graphique
align Mode d'alignement horizontal. center
verticalAlign Mode d'alignement vertical. top
margin L'espacement entre le titre et le sous-titre, ou l'espacement par rapport à la zone principale du graphique. 15
floating Indique s'il faut flotter. Si true, le titre peut s'écarter de la zone principale du graphique, ce qui peut être utilisé avec les attributs x et y. false
style Définir les styles CSS. {color: '#3E576F',
fontSize: '16px'}

Subtitle : options du sous-titre

Les options d'attribut fournies par le sous-titre sont à peu près les mêmes que celles du titre. Vous pouvez vous référer aux options du titre ci-dessus. Il convient de mentionner que l'option text du sous-titre est par défaut '', c'est-à-dire vide, donc le sous-titre n'est pas affiché par défaut.

xAxis : options de l'axe X.

Les options de l'axe X sont utilisées pour définir les propriétés liées à l'axe X du graphique.

Paramètre Description Valeur par défaut
categories Définir les noms des catégories de l'axe X, tableau, par ex., categories: ['Apples', 'Bananas', 'Oranges'] []
title Nom de l'axe X, prend en charge des attributs comme text, enabled, align, rotation, style, etc.  
labels Définit le style de chaque nom de catégorie sur l'axe X, comme style, formatter, rotation, etc. array
max La valeur maximale de l'axe X (lorsque categories est vide). Si null, la valeur maximale correspondra automatiquement à une valeur maximale basée sur les données de l'axe X. null
min La valeur minimale de l'axe X (lorsque categories est vide). Si null, la valeur minimale correspondra automatiquement à une valeur minimale basée sur les données de l'axe X. array
gridLineColor Couleur de la grille (ligne verticale) #C0C0C0
gridLineWidth Largeur de la grille (ligne verticale) 1
lineColor Couleur de la ligne de base #C0D0E0
lineWidth Largeur de la ligne de base 0

Options de l’axe Y.

Les options de l’axe Y sont globalement cohérentes avec celles de xAxis. Veuillez vous référer aux paramètres du tableau ci-dessus ; elles ne sont pas listées séparément.

Options de séries de données

Les options de séries de données servent à définir les propriétés liées aux données à afficher dans le graphique.

Paramètre Description Valeur par défaut
data Les séries de données affichées dans le graphique peuvent être au format tableau ou JSON. Par exemple : data:[0, 5, 5], ou
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]		 ''
name Afficher le nom de la série de données. ''
type Type de série de données, prend en charge area, areaspline, bar, line, pie, scatter ou spline line

plotOptions : Options pour les points de données.

plotOptions est utilisé pour définir les propriétés liées aux points de données dans le graphique. Selon le type de graphique, les paramètres de propriété dans plotOptions varient légèrement ; les options courantes sont listées ci-dessous.

Paramètre Description Valeur par défaut
activé Indique s'il faut afficher les données directement sur les points de données false
allowPointSelect Indique s'il faut autoriser la sélection des points de données avec la souris false
formatter Fonction de rappel pour formater le contenu d'affichage des données formatter: function() {return this.y;}

Tooltip : info-bulle du point de données

Tooltip est utilisé pour définir les informations d'info-bulle affichées lorsque la souris survole un point de données.

Paramètre Description Valeur par défaut
activé Indique s'il faut afficher l'infobulle. vrai
backgroundColor Définir la couleur d'arrière-plan de l'infobulle rgba(255, 255, 255, .85)
borderColor La couleur de bordure de l'infobulle, qui correspond automatiquement par défaut à la couleur de la série de données. auto
borderRadius Rayon des coins de l'infobulle. 5
shadow Indique s'il faut afficher l'ombre de l'infobulle vrai
style Définit le style du contenu de l'infobulle, comme la couleur de police, etc. color:'#333'
formatter Fonction de rappel utilisée pour formater le contenu affiché de l'infobulle. Le contenu renvoyé prend en charge des balises HTML telles que : <b>, <strong>, <i>, <em>, <br/>, <span>. 2

Légende : Options de légende

legend est utilisé pour définir les propriétés liées à la légende.

Paramètre Description Valeur par défaut
layout Forme d'affichage, prenant en charge les dispositions horizontale et verticale. horizontal
align Alignement. center
backgroundColor Couleur d'arrière-plan de la légende. null
borderColor Couleur de bordure de la légende. #909090
borderRadius Rayon de bordure de la légende. 5
activé Indique s'il faut afficher la légende. vrai
floating Indique s'il peut flotter, utilisé avec les attributs x et y. false
shadow Indique s'il faut afficher l'ombre. false
style Définir le style du contenu de la légende ''

Pour plus d'informations détaillées, veuillez consulter la documentation officielle en anglais du site Highcharts :http://api.highcharts.com/highcharts

autres extensions