Préface
Tous les graphiques à l'exception des graphiques circulaires ont l'axe X et l'axe Y. Par défaut, l'axe x s'affiche en bas du graphique et l'axe y est affiché à gauche (avec plusieurs axes Y, il peut être affiché sur les côtés gauche et droit). En définissant chart.inverted = true , les positions d'affichage de l'axe X-Y peuvent être ajustées.
Apprenons ensemble les axes de coordonnées des high-plaques.
Tags:
1. Titre
xaxis: {title: {text: 'x-axe title'}} yaxis: {title: {text: 'y-axe title'}}2. Tags
Étiquettes: activé, format, setp
yaxis: {labels: {activé: true, formatter: function () {if (this.value <= 3) {return "premier niveau (" + this.value + ")"; } else if (this.value> 3 && this.value <= 5) {return "deuxième niveau (" + this.value + ")"; } else {return "troisième niveau (" + this.value + ")"; }}, étape: 1 // recherche plusieurs lignes à afficher une fois}3. Mesh
1.GridlineWidth
Largeur de ligne de grille. L'axe x par défaut est 0 et l'axe y par défaut est 1px.
2.GridlineColor
Couleur de la ligne de grille. La valeur par défaut est : # C0C0C0 .
3.Gridlinedashstyle
Style de ligne de ligne de grille. Semblables à la frontière CSS, ceux couramment utilisés incluent: solide, point et tableau de bord .
yaxis: {// gridlinewidth: '1px', // notez que si cette propriété gridlinedashstyle est utilisée, elle ne fonctionnera pas GridlineColor: '# 019000', GridlinedashStyle: 'Dash',}4. Type
xaxis: {catégories: ['a', 'b', 'c']}, yaxis: {type: 'datetime'},5. inversé
L'inversion est de retourner l'axe au lieu de X et Y pour s'ajuster. Par exemple, le résultat de l'inversion de l'axe y est que l'axe y commence à partir de la plus grande valeur, et la valeur minimale est en bas
xaxis: {catégories: ['a', 'b', 'c'], inversé: true}, yaxis: {type: 'datetime', inversé: true},6.Posite
Lorsque sa valeur est définie sur true, les positions affichées sur l'axe des x et les axes y sont de haut en bas et de gauche et de droite respectivement.
xaxis: {catégories: ['a', 'b', 'c'], opposé: true}, yaxis: {type: 'DateTime', opposé: true}7.Inverti
graphique: {type: 'line', style: {FonTSize: "17px",}, inversé: true}8.min, max
Contrôle les valeurs minimales et maximales de l'axe de nombre.
Remarque: Contrôle des permis, des propriétés maximales , vous pouvez facilement contrôler la plage d'affichage de l'axe numérique, etc. (c'est aussi un problème très courant)
Résumer
Ce qui précède concerne cet article. L'avez-vous appris? L'éditeur continuera à mettre à jour les articles des HighCharts. Les amis qui sont intéressés par les HighCharts devraient continuer à prêter attention à Wulin.com. J'espère que cet article vous aidera à apprendre.