Latest web development tutorials

les options de configuration de Highcharts sont décrits en détail

Highcharts options de configuration fournissent un grand nombre de paramètres, vous pouvez facilement personnalisés pour répondre aux besoins des utilisateurs graphiques de cette section pour découvrir plus d'options de configuration de Highcharts d'utilisation:

Les paramètres de configuration (attributs + Event)

  1. chart.events.addSeries: Ajouter le nombre de colonnes du tableau.

  2. chart.events.click: Cliquez sur un événement toute la zone de traçage du graphique est survenue.

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

  4. chart.events.redraw: graphique redessine événement, cliquez sur les spectacles de légende et peut déclencher le dessin caché.

  5. chart.events.selection: Lorsque le zoom sélectionnable de la courbe du graphique, sélectionnez le graphique lorsque l'opération peut déclencher l'événement.

  6. chart.height: tableau de hauteur tirée.

  7. chart.inverted: tableau x, y-axe sur l'échange.

  8. chart.polar: si le graphique polaire.

  9. chart.reflow: lorsque les changements de taille de la fenêtre, la largeur de la carte d'adaptation des changements de taille de la fenêtre.

  10. chart.renderTo: le chargement de la carte, est un objet DOM sur la page.

  11. chart.showAxes: tableau blanc, il faut afficher les axes.

  12. chart.type: type de graphique, ligne par défaut, il y a un bar / colonne / pie ......

  13. chart.width: la largeur de la zone de traçage du graphique, la valeur par défaut est adaptatif.

  14. chart.zoomType: données de type d'amplification dans le tableau du rapport, vous pouvez zoomer sur l'axe X ou Y-axe zoom, vous pouvez zoomer axes XY simultanément.

  15. couleurs: La plupart des colonnes dans le tableau, le nombre de colonnes entre chaque couleur. Est-ce un tableau, en général, ne bouge pas.

  16. crédits .Enabled: si vous souhaitez autoriser l'affichage des informations de copyright.

  17. credits.href: lien sous copyright.

  18. credits.text: informations sur le copyright texte d'affichage.

  19. exporter .buttons.exportButton.enabled: si pour permettre le bouton d' affichage à l'exportation.

  20. exporting.buttons.exportButton.menuItems: option de menu bouton Exporter.

  21. événement bouton Exporter est cliqué, pas menu interne: exporting.buttons.exportButton.onclick.

  22. exporting.buttons.printButton.enabled: si vous souhaitez autoriser le bouton Imprimer.

  23. exporting.buttons.printButton.onclick: bouton d'impression cliquez sur événement.

  24. exporting.enabled: imprimer et exporter les boutons sont autorisés.

  25. exporting.filename: est le nom de fichier du fichier d'exportation.

  26. exporting.type: formats de fichier d'image d'exportation par défaut.

  27. exporting.url: SVG tableau de conversion et de traitement d'exportation adresse de l'interface.

  28. exporing.width: default largeur de l'image à l'exportation.

  29. étiquettes: les étiquettes peuvent être chargés dans une position quelconque de la carte, il y a des éléments, le style.

  30. lang: configuration des paramètres de langue, et la configuration en rapport avec le menu du bouton Exporter, nom et d'autres temps de configuration.

  31. legend.enabled: si vous souhaitez autoriser Legend.

  32. navigation.buttonOptions.enabled: boutons de navigation graphique si tout ce qui peut être cliqué.

  33. plotOptions .area.allowPointSelect: si vous souhaitez autoriser les points de clic de données.

  34. plotOptions.area.color: Dessin couleur.

  35. plotOptions.area.dataLabels.enabled: si vous souhaitez autoriser les étiquettes de données.

  36. plotOptions.area.enableMouseTracking: d'autoriser ou non les données dans le graphique, point de données de bulle de suivi de la souris est affiché.

  37. plotOptions.area.events.checkboxClick: données dans la légende du graphique case événement click.

  38. plotOptions.area.events.click: tableaux de données, points de données cliquez sur événement.

  39. plotOptions.area.events.hide: tableau de données, une séquence de données d'événements lorsqu'il est masqué.

  40. plotOptions.area.events.show: tableau de données, une séquence de données d'événements lors de l'affichage.

  41. plotOptions.area.events.legendItemClick: tableau de données, la légende de l'élément d'événement est cliqué, l'affectation directe faux, il est pas cliquable.

  42. plotOptions.area.events.mouseOut: points sur l'événement de données de souris.

  43. plotOptions.area.events.mouseOver: points de données de la souris après l'événement.

  44. plotOptions.area.marker.enabled: si vous souhaitez afficher le point tag graphique de dessin.

  45. plotOptions.area.marker.states.hover.enabled: d'autoriser ou non l'état tag de renversement.

  46. plotOptions.area.marker.states.select.enabled: d'autoriser ou non le statut de sélection des variables.

  47. plotOptions.area.point.events.click: tracer chaque point clic seul événement.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: Event supprimé les points de tableau sont utilisés.

  51. plotOptions.area.point.events.select: Sélectionnez l'événement graphique à mi-parcours.

  52. plotOptions.area.point.events.unselect: tableau de l'événement milieu quand désélectionné.

  53. plotOptions.area.point.events.update: événement de mise à jour se produit lorsque les données dans le graphique.

  54. plotOptions.area.visible: Lors du chargement de la série de données par défaut est affiché ou masqué.

  55. plotOptions.area.zIndex: Dans le cas de plusieurs séquences, régler l'ordre d'empilement de chaque séquence.

  56. Au-dessus de point.events mêmes applique aussi à l'autre zone de diagrammes de classes (arearange, areaspline, areasplinerange), autre histogramme (barre, colonne) et toutes les cartes.

  57. plotOptions.area.showInLegend: si vous voulez afficher dans la légende.

  58. plotOptions.area.stacking: est la valeur de la pile, la pile ou en pourcentage.

  59. plotOptions.area.states.hover.enabled: d'autoriser ou non l'état de mettre la souris.

  60. plotOptions.area.stickyTracking: points de données de suivi de souris collant.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange similaire au plotOptions.area

  62. plotOptions.bar.groupPadding: Pour les graphiques à barres intervalle de paquets entre chaque paquet.

  63. plotOptions.bar.grouping: si les données groupe.

  64. plotOptions.bar.minPointLength :: Définit la valeur du point est égal à zéro, le point de la longueur minimale pour

  65. plotOptions.bar.showInLegend: si vous voulez afficher dans la légende.

  66. plotOptions.bar.stacking: est la valeur de la pile, la pile ou en pourcentage (pour cent normale /).

  67. plotOptions.column, plotOptions.columnrange similaire au plotOptions.bar

  68. configuration plotOptions.line liée est la configuration de plotOptions.area similaire.

  69. plotOptions.pie.ignoreHiddenPoint: Dans le diagramme circulaire, une séquence particulière par Legend cliquez pour cacher, l'ensemble graphique est de 100% réaffectation, ou masquée uniquement sur la base de l'original, montrant un écart.

  70. plotOptions.pie.innerSize: Lors de l'élaboration d'un diagramme circulaire, un centre de graphique circulaire pour réserver bien vide.

  71. plotOptions.pie.slicedOffset: allowPointSelect utiliser en conjonction avec, lorsque le point est cliqué, la peau du secteur correspondant, ce paramètre de configuration qui est espacée à une distance.

  72. Autre configuration commune paramètres plotOptions.pie ressemblance avec plotOptions.area, plotOptions.scatter, plotOptions.series, configuration plotOptions.area similaire de configuration associée plotOptions.spline.

  73. série: un tableau.

  74. series.data.color: une donnée de couleur.

  75. series.data.dataLabels: données de l'étiquette de données d'une séquence.

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

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

  78. series.data.name: nom des points de données de configuration.

  79. series.data.sliced: Configurer le graphique circulaire, la distance séparant la taille du secteur.

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

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

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

  83. series.stack: empilés index de groupe.

  84. series.type: séquence de données type d'affichage.

  85. series.xAxis, series.yAxis: lors de l'utilisation de plusieurs axes, qui spécifie l'axe correspond à un nombre de colonnes.

  86. sous - titre: Configuration du sous - titre de la carte.

  87. titre: le titre de la configuration graphique.

  88. infobulle: Configurer les données de l' invite de bulles dans le tableau.

  89. tooltip.valueDecimals: Permettre aux décimales.

  90. tooltip.percentageDecimals: Autoriser pourcentage de décimales.

  91. axeX, axeY paramètres de configuration de l' axe

  92. allowDecimals: si vous souhaitez autoriser les décimales de l'axe.

  93. catégories: une matrice d'axes de classification.

  94. plotlines: Dessinez la ligne principale.

  95. tickColor: échelle de couleurs.

  96. tickInterval: échelle de valeur de pas.

  97. labels.rotation: étiquettes de l'échelle degré de rotation

Graphique: option de zone de graphique

option de zone de graphique de zone de graphique du graphique est utilisé pour définir les propriétés.

Paramètres description Par défaut
backgroundColor Réglage zone de graphique couleur de fond #FFFFFF
borderWidth Définissez la largeur graphique des frontières 0
borderRadius Réglage de la frontière, les angles arrondis 5
renderTo Graphique placer des conteneurs, généralement placés dans un html DIV, obtenir l'id valeur de l'attribut DIV nul
defaultSeriesType La ligne de type de graphique par défaut, spline, région, areaspline, colonne, bar, tarte, scatter 0
largeur largeur du graphique, selon le conteneur de tableau largeur par défaut d'adaptation nul
hauteur tableau de la hauteur, le conteneur de graphique par défaut en fonction de grande capacité d'adaptation nul
marge Et d'autres éléments dans le tableau de pas de graphique, tels que [0,0,0,0] [Null]
plotBackgroundColor La couleur de fond principale zone de graphique couleur de fond, les axes X et Y de la zone fermée nul
plotBorderColor La couleur de la région frontalière borde le graphique principal, les axes X et Y de l'espace clos nul
plotBorderWidth Largeur de la zone de graphique frontière principale 0
ombre Ombre est défini, vous devez définir le backgroundColor de couleur de fond. faux
refusion Que ce soit en utilisant la zone de graphique de la hauteur et la largeur, si pas défini la largeur et la hauteur, la taille sera adaptée. vrai
zoomType Faites glisser la souris pour zoomer, zoom sur l'axe des x ou y, peut être réglé sur: 'x', 'y', 'xy' ''
événements Événement rappel méthode addSeries de support, cliquez sur la méthode, la méthode de charge, la méthode de la fonction de rappel de sélection.

Couleur: Options de couleur

Les options de couleur pour le réglage des couleurs de nuancier.

Paramètres description Par défaut
couleur Pour l'affichage de la couleur, un tableau de graphiques, ligne / bar / graphique ainsi de suite. tableau

Highcharts fournit déjà plusieurs schéma de couleurs par défaut, lorsque vous souhaitez afficher des graphiques couleur plus gentil, plus graphiques seront automatiquement commencer à partir de la première sélection de schéma de couleurs. Personnalisé approche de système de couleurs: 

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Titre: Options de titre

option de légende Titre est utilisé pour définir les propriétés pertinentes du titre du graphique.

Paramètres description Par défaut
texte Le texte du titre. Titre du graphique
aligner L'alignement horizontal. centre
verticalAlign L'alignement vertical. haut
marge Entre le titre principal et la gamme de pas de sous-titres ou un graphique. 15
flottant Que ce soit flottant, si elle est vraie, le titre peut être décalée par rapport à la zone de graphique principale, avec x, y attribut. faux
style Définir des styles CSS. {Couleur: '# 3E576F',
fontSize: '16px'}

options de sous-titres: Sous-titres

Options de propriété sous-titre fournir sensiblement le même titre avec le titre, le titre peut se référer aux options ci-dessus, il convient de mentionner que les options de texte de sous-titres par défaut '', qui est vide, de sorte que le sous-titre est pas affiché par défaut.

axeX: option Axe X

option axe X est utilisé pour définir l'axe X tableau des propriétés connexes.

Paramètres description Par défaut
catégories Définir la catégorie d'axe X noms, les tableaux, par exemple: catégories: [ 'pommes', 'Bananas', 'Oranges'] []
titre Nom X Axis, le texte de soutien, a permis, aligner, la rotation, le style et les autres attributs
étiquettes Réglez l'axe X de chaque style de style de nom de la catégorie, le format formatter, l'angle de rotation et similaires. tableau
max Axe X valeur maximale (catégories est vide), si elle est nulle, alors la valeur maximale correspondra automatiquement les données de l'axe X à un maximum. nul
min X axe minimum (catégories est vide), si elle est nulle, alors la valeur minimale correspond automatiquement les données de l'axe X à un minimum. tableau
gridLineColor Grille (vertical) Couleur # C0C0C0
GridLineWidth Grille (barre verticale) Largeur 1
lineColor couleur de base # C0D0E0
lineWidth largeur de la ligne de base 0

option Axe Y: axeY

l'option de l'axe Y est compatible avec les options axeX mentionnées ci-dessus, s'il vous plaît se référer à la table dans le paramètre paramètres ne sont plus mentionnés séparément.

Série: données Options de colonne

option Colonnes de données est utilisée pour définir le graphique pour afficher les données des propriétés connexes.

Paramètres description Par défaut
données Affiché dans la colonne de données du graphique, qui peut être un tableau ou des données JSON formatées. Tels que: les données: [0, 5, 3, 5], ou
données: [{name: "Point 1 ', y: 0}, {name:" Point 2', y: 5}] 		''
nom Affiche le nom de la colonne de données. ''
type types de données de colonne, zone de soutien, areaspline, bar, colonne, ligne, tarte, scatter ou spline ligne

plotOptions: options de points de données

plotOptions utilisés pour définir les points de données du graphique des propriétés connexes. plotOptions Selon divers types de graphiques, leurs propriétés légèrement différentes, maintenant des options couramment utilisées répertoriés.

Paramètres description Par défaut
permis Les données sont affichées directement sur les points de données faux
allowPointSelect Que ce soit pour permettre l'utilisation de la souris pour sélectionner les points de données faux
formatter Fonction de rappel, le format d'affichage des données formatter: function () {return this.y;}

Tooltip: points de données de ballon

informations Tooltip pour le réglage de la boîte invite lorsque le point de données de glissement de la souris est affiché.

Paramètres description Par défaut
permis Que ce soit pour afficher la boîte invite vrai
backgroundColor Réglez la couleur de fond ballon rgba (255, 255, 255, .85)
borderColor Balloon couleur de la bordure, la colonne de données par défaut correspond automatiquement la couleur auto
borderRadius Balloon angle rond 5
ombre Que ce soit pour afficher les ombres de la boîte invite vrai
style Définition de styles de contenu de ballons, tels que la couleur de la police, etc. couleur: '# 333'
formatter Fonction callback pour formater la sortie de l'affichage du ballon. contenu de support Retour tels que les balises HTML: <b>, <strong>, <i>, <em>, <br/>, <span> 2

Légende: Légende Option

la légende de la légende est utilisée pour définir les propriétés.

Paramètres description Par défaut
disposition Format d'affichage, le niveau vertical et horizontal vertical de support horizontal
aligner Alignement. centre
backgroundColor Légende couleur de fond. nul
borderColor couleur de la bordure de la légende. # 909090
borderRadius angle de frontière Légende 5
permis Que ce soit pour afficher la légende vrai
flottant Je peux flotter, avec x, y propriétés. faux
ombre Que ce soit pour afficher des ombres faux
style Le contenu du style de légende ''

Pour plus d' informations, consultez le site officiel de la documentation Highcharts Anglais: http://api.highcharts.com/highcharts