Description détaillée des options de configuration des Highcharts
Highcharts fournit un grand nombre de paramètres d'options de configuration. Vous pouvez facilement personnaliser les graphiques qui répondent aux besoins des utilisateurs. Ce chapitre présente en détail l'utilisation des options de configuration de Highcharts :
. Configuration des paramètres (Propriétés + Événements)
chart.events.addSeries : Ajoutez une série au graphique.
chart.events.click : événement de clic qui se produit sur la zone de dessin de l'ensemble du graphique.
chart.events.load : événement de chargement de graphique.
chart.events.redraw : événement de redessinage de graphique, qui peut être déclenché lorsque l'on clique sur la légende pour afficher et masquer le dessin.
chart.events.selection : Lorsque la courbe du graphique peut être agrandie de manière sélective, cet événement peut être déclenché lorsqu'une opération graphique est sélectionnée.
chart.height : La valeur de hauteur du graphique dessiné.
chart.inverted : Les axes x et y du graphique sont inversés.
chart.polar : S'il s'agit d'une carte polaire.
chart.reflow : Lorsque la taille de la fenêtre change, la largeur du graphique s'adapte au changement de taille de la fenêtre.
chart.renderTo : La position où le graphique est chargé est un objet DOM sur la page.
chart.showAxes : Dans un graphique vierge, s'il faut afficher les axes de coordonnées.
chart.type : type de graphique, la valeur par défaut est une ligne et une barre/colonne/secteur...
chart.width : graphique Le largeur de la zone de dessin, la valeur par défaut est adaptative.
chart.zoomType : le type de zoom du rapport de données dans le graphique. Vous pouvez zoomer sur l'axe X, l'axe Y ou les deux.
couleurs : lorsqu'il y a plusieurs colonnes dans le graphique, les couleurs entre les colonnes. C'est un tableau et ne bouge généralement pas.
credits.enabled : s'il faut autoriser l'affichage des informations de droits d'auteur.
credits.href : Lien de copyright.
credits.text : texte d'affichage des informations de copyright.
exporting.buttons.exportButton.enabled : s'il faut autoriser l'affichage du bouton d'exportation.
exporting.buttons.exportButton.menuItems : options de menu pour les boutons d'exportation.
exporting.buttons.exportButton.onclick : Exporter l'événement de clic sur le bouton, pas le menu interne.
exporting.buttons.printButton.enabled : s'il faut autoriser l'impression des boutons.
exporting.buttons.printButton.onclick : L'événement de clic du bouton d'impression.
exporting.enabled : indique si les boutons d'impression et d'exportation sont autorisés.
exporting.filename : Le nom du fichier exporté.
exporting.type : Le format de fichier par défaut pour exporter des images.
exporting.url : L'adresse de traitement de l'interface pour la conversion et l'exportation de graphiques SVG.
exporing.width : La largeur par défaut des images exportées.
étiquettes : étiquettes, qui peuvent être chargées à n'importe quelle position dans le graphique et contenir des éléments et des styles.
lang : Configuration des paramètres de langue, configuration liée au menu du bouton d'exportation, configuration du nom de l'heure, etc.
legend.enabled : s'il faut autoriser les légendes.
navigation.buttonOptions.enabled : indique si les boutons de toutes les navigations du graphique peuvent être cliqués.
plotOptions.area.allowPointSelect : s'il faut autoriser le clic sur les points de données.
plotOptions.area.color : La couleur du tracé.
plotOptions.area.dataLabels.enabled : s'il faut autoriser les étiquettes de données.
plotOptions.area.enableMouseTracking : s'il faut autoriser l'affichage des bulles de suivi de la souris pour les points de données dans les graphiques de données.
plotOptions.area.events.checkboxClick : l'événement de clic de la case à cocher dans la légende du graphique de données.
plotOptions.area.events.click : l'événement de clic du point de données dans le graphique de données.
plotOptions.area.events.hide : événement lorsqu'une certaine série de données est masquée dans le graphique de données.
plotOptions.area.events.show : événement lorsqu'une certaine série de données est affichée dans le graphique de données.
plotOptions.area.events.legendItemClick : dans le graphique de données, l'événement se produit lorsque l'on clique sur l'élément de la légende. S'il est directement affecté à false, il ne sera pas cliquable.
plotOptions.area.events.mouseOut : événement de sortie de souris pour les points de données.
plotOptions.area.events.mouseOver : passez la souris sur l'événement pour les points de données.
plotOptions.area.marker.enabled : s'il faut afficher les marqueurs de points dans le tracé du graphique.
plotOptions.area.marker.states.hover.enabled : s'il faut autoriser le survol de la souris sur l'état du marqueur.
plotOptions.area.marker.states.select.enabled : s'il faut autoriser l'état de sélection du marqueur.
plotOptions.area.point.events.click : chaque événement de pointage individuel dans le graphique.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove : Événement lorsqu'un point du graphique est supprimé.
plotOptions.area.point.events.select : événement de sélection de points de graphique.
plotOptions.area.point.events.unselect : Événement lorsque le point dans le graphique est désélectionné.
plotOptions.area.point.events.update : événement lorsque les données du graphique sont mises à jour.
plotOptions.area.visible : Lors du chargement, si la série de données est affichée ou masquée par défaut.
plotOptions.area.zIndex : Dans le cas de plusieurs séquences, ajustez l'ordre d'empilement de chaque séquence.
Les point.events ci-dessus sont également applicables à d'autres graphiques en aires (arearange, Areaspline, Areasplinerange), à d'autres histogrammes (barres, colonnes) et à tous les graphiques.
plotOptions.area.showInLegend : s'il faut afficher dans la légende.
plotOptions.area.stacking : s'il faut empiler par valeur ou par pourcentage.
plotOptions.area.states.hover.enabled : indique si l'état dans lequel la souris est placée est autorisé.
plotOptions.area.stickyTracking : points de données de suivi collants à la souris.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange sont similaires à plotOptions.area
plotOptions.bar.groupPadding : pour les groupes d'histogrammes , l'intervalle entre chaque groupe.
plotOptions.bar.grouping : s'il faut regrouper les données.
plotOptions.bar.minPointLength : : Définit la longueur minimale du point lorsque la valeur du point est nulle.
plotOptions.bar.showInLegend : Que ce soit Montré dans la légende.
plotOptions.bar.stacking : s'il faut empiler par valeur ou par pourcentage (normal/pourcentage).
plotOptions.column, plotOptions.columnrange est similaire à plotOptions.bar
La configuration associée de plotOptions.line est similaire à plotOptions.area configuration.
plotOptions.pie.ignoreHiddenPoint : Dans le diagramme circulaire, après qu'une certaine série soit masquée en cliquant sur la légende, l'ensemble du diagramme circulaire doit-il être redistribué à 100 %, ou uniquement en fonction de le graphique original ? Caché ci-dessus, montrant un écart.
plotOptions.pie.innerSize : lorsque vous dessinez un diagramme circulaire, combien d'espace doit être laissé au centre du diagramme circulaire.
plotOptions.pie.slicedOffset : Utilisé en conjonction avec allowPointSelect, lorsqu'un point est cliqué, le secteur correspondant est décollé. Ce paramètre est la distance par rapport à la configuration.
Les autres paramètres de configuration courants de plotOptions.pie sont similaires à plotOptions.area, plotOptions.scatter, plotOptions.series et la configuration associée de plotOptions.spline est similaire à la configuration plotOptions.area .
série : est un tableau.
series.data.color : La couleur d'une certaine donnée.
series.data.dataLabels : étiquettes de données pour certaines données de la série.
series.data.events est similaire à la configuration associée de plotOptions.area.point.events.
series.data.marker est similaire à la configuration associée de plotOptions.area.marker.
series.data.name : configurez le nom du point de données.
series.data.sliced : Configurez la distance de séparation des secteurs dans un diagramme circulaire.
series.data.x : x valeur du point.
series.data.y : y valeur du point.
series.name : Le nom de la série de données.
series.stack : index de groupe empilé.
series.type : Afficher le type de série de données.
series.xAxis, series.yAxis : Lorsque vous utilisez plusieurs axes de coordonnées, spécifiez à quel axe de coordonnées correspond une certaine séquence.
sous-titre : Configurez le sous-titre du graphique.
titre : Configurez le titre du graphique.
info-bulle : configurez les info-bulles pour les données dans le graphique.
tooltip.valueDecimals : Le nombre de points décimaux autorisés.
tooltip.percentageDecimals : Nombre de décimales autorisées pour les pourcentages.
Paramètres de configuration xAxis, yAxis axe de coordonnées
allowDecimals : indique si les décimales sont autorisées sur l'axe de coordonnées.
catégories : C'est un tableau, la classification de l'axe de coordonnées.
plotLines : tracez des lignes principales.
tickColor : couleur de coche.
tickInterval : La valeur de pas de l'échelle.
labels.rotation : degré de rotation de l'étiquette d'échelle
Graphique : options de zone de graphique
Les options de zone de graphique sont utilisées pour définir les propriétés liées à la zone graphique.
| 参数 | 描述 | 默认值 |
|---|---|---|
| backgroundColor | 设置图表区背景色 | #FFFFFF |
| borderWidth | 设置图表边框宽度 | 0 |
| borderRadius | 设置图表边框圆角角度 | 5 |
| renderTo | 图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值 | null |
| defaultSeriesType | 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter | 0 |
| width | 图表宽度，默认根据图表容器自适应宽度 | null |
| height | 图表高度，默认根据图表容器自适应高度 | null |
| margin | 设置图表与其他元素之间的间距，数组，如[0,0,0,0] | [null] |
| plotBackgroundColor | 主图表区背景色，即X轴与Y轴围成的区域的背景色 | null |
| plotBorderColor | 主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色 | null |
| plotBorderWidth | 主图表区边框的宽度 | 0 |
| shadow | 是否设置阴影，需要设置背景色backgroundColor。 | false |
| reflow | 是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小。 | true |
| zoomType | 拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy' | '' |
| events | 事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数。 |
Couleur : Option de couleur
L'option de couleur Couleur est utilisée pour définir la palette de couleurs du graphique.
| 参数 | 描述 | 默认值 |
| color | 用于展示图表，折线/柱状/饼状等图的颜色，数组形式。 | array |
Highcharts a fourni plusieurs jeux de couleurs par défaut. Lorsqu'il y a plus de graphiques à afficher que de types de couleurs, les graphiques supplémentaires seront automatiquement sélectionnés dans le premier jeu de couleurs. Méthodes pour personnaliser la palette de couleurs :
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});Titre : option de titre
L'option de titre du titre est utilisée pour définir les propriétés liées au titre du graphique.
| 参数 | 描述 | 默认值 |
|---|---|---|
| text | 标题文本内容。 | Chart title |
| align | 水平对齐方式。 | center |
| verticalAlign | 垂直对齐方式。 | top |
| margin | 标题与副标题之间或者主图表区间的间距。 | 15 |
| floating | 是否浮动，如果为true，则标题可以偏离主图表区，可配合x,y属性使用。 | false |
| style | 设置CSS样式。 | {color: '#3E576F', fontSize: '16px'} |
Sous-titre : Options de 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 de titre ci-dessus. que l'option texte du sous-titre est par défaut '', c'est-à-dire vide, donc le sous-titre n'est pas affiché par défaut.
xAxis : option de l'axe X
L'option de l'axe X est utilisée pour définir les propriétés liées à l'axe X du graphique.
| 参数 | 描述 | 默认值 |
|---|---|---|
| categories | 设置X轴分类名称，数组，例如：categories: ['Apples', 'Bananas', 'Oranges'] | [] |
| title | X轴名称，支持text、enabled、align、rotation、style等属性 | |
| labels | 设置X轴各分类名称的样式style，格式formatter，角度rotation等。 | array |
| max | X轴最大值(categories为空时)，如果为null，则最大值会根据X轴数据自动匹配一个最大值。 | null |
| min | X轴最小值(categories为空时)，如果为null，则最小值会根据X轴数据自动匹配一个最小值。 | array |
| gridLineColor | 网格（竖线）颜色 | #C0C0C0 |
| gridLineWidth | 网格(竖线)宽度 | 1 |
| lineColor | 基线颜色 | #C0D0E0 |
| lineWidth | 基线宽度 | 0 |
yAxis : options de l'axe Y
Les options de l'axe Y sont fondamentalement les mêmes que les options de l'axe x ci-dessus. Veuillez vous référer aux paramètres des paramètres dans le tableau ci-dessus et ne seront pas répertoriés séparément.
Série : Options de colonne de données
Les options de colonne de données sont utilisées pour définir les propriétés liées aux données à afficher dans le graphique.
| 参数 | 描述 | 默认值 |
|---|---|---|
| data | 显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] | '' |
| name | 显示数据列的名称。 | '' |
| type | 数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or spline | line |
plotOptions : Options des points de données
plotOptions est utilisé pour définir les propriétés liées aux points de données dans le graphique. plotOptions a des paramètres de propriété légèrement différents selon les différents types de graphiques. Les options courantes sont désormais répertoriées.
| 参数 | 描述 | 默认值 |
| enabled | 是否在数据点上直接显示数据 | false |
| allowPointSelect | 是否允许使用鼠标选中数据点 | false |
| formatter | 回调函数，格式化数据显示内容 | formatter: function() {return this.y;} |
Info-bulle : Boîte d'invite de point de données
L'info-bulle est utilisée pour définir les informations de la boîte d'invite affichées lorsque la souris glisse vers le point de données.
| 参数 | 描述 | 默认值 |
| enabled | 是否显示提示框 | true |
| backgroundColor | 设置提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框边框颜色，默认自动匹配数据列的颜色 | auto |
| borderRadius | 提示框圆角度 | 5 |
| shadow | 是否显示提示框阴影 | true |
| style | 设置提示框内容样式，如字体颜色等 | color:'#333' |
| formatter | 回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：<b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Légende : option Légende
la légende est utilisée pour définir les propriétés liées à la légende.
| 参数 | 描述 | 默认值 |
|---|---|---|
| layout | 显示形式，支持水平horizontal和垂直vertical | horizontal |
| align | 对齐方式。 | center |
| backgroundColor | 图例背景色。 | null |
| borderColor | 图例边框颜色。 | #909090 |
| borderRadius | 图例边框角度 | 5 |
| enabled | 是否显示图例 | true |
| floating | 是否可以浮动，配合x，y属性。 | false |
| shadow | 是否显示阴影 | false |
| style | 设置图例内容样式 | '' |
Pour plus de détails, veuillez vous référer à la documentation en anglais sur le site officiel de highcharts : http://api.highcharts.com/highcharts
