Vorwort
Alle Diagramme mit Ausnahme von Kreisdiagrammen haben eine X-Achse und die Y-Achse. Standardmäßig wird die X-Achse am unteren Rand des Diagramms angezeigt und die y-Achse links angezeigt (mit mehreren Y-Achse kann sie auf der linken und rechten Seite angezeigt werden). Durch das Einstellen chart.inverted = true können die X-Y-Y-A-Achse-Anzeigepositionen eingestellt werden.
Lassen Sie uns die Koordinatenachsen von Highcharts zusammen lernen.
Tags:
1. Titel
xaxis: {title: {text: 'x-axis title'}} yaxis: {title: {text: 'y-achse title'}}2. Tags
Beschriftungen: aktiviert, Formatierer, setp
yaxis: {labels: {enabled: true, formatter: function () {if (this.value <= 3) {return "erster Stufe ("+this.Value+")"; } else if (this.value> 3 && this.Value <= 5) {return "zweite Ebene ("+this.value+")"; } else {return "dritte Ebene ("+this.value+")"; }}, Schritt: 1 // Suchen Sie mehrere Zeilen, die einmal angezeigt werden sollen}3. Mesh
1.Gridlinewidth
Gitterlinienbreite. Die Standard-X-Achse beträgt 0 und die Standard-Y-Achse ist 1px.
2.GridlineColor
Gitterlinie Farbe. Die Standardeinstellung ist : #C0C0C0 .
3.Gridlinedashstyle
Style Line Line Line. Ähnlich wie bei CSS-Randstil gehören häufig verwendete: Solid, DOT und Dash .
yaxis: {// GridLineWidth: '1px', // Beachten Sie, dass diese Eigenschaft, wenn diese Eigenschaft verwendet wird, nicht funktioniert, sondern auch GridlineColor: '#019000', Gridlinedashstyle: 'Dash',}4. Typ
Xaxis: {Kategorien: ['A', 'B', 'C']}, yaxis: {type: 'datetime'},5. umgerichtet
Die Inversion besteht darin, die Achse anstelle von X und Y umzudrehen, um sich anzupassen. Zum Beispiel ist das Ergebnis der Invertierung der y-Achse, dass die y-Achse vom größten Wert beginnt und der Mindestwert unten liegt
Xaxis: {Kategorien: ['A', 'B', 'C'], umgekehrt: true}, yaxis: {type: 'datetime', reversed: true},6. Opposite
Wenn sein Wert auf True gesetzt ist, sind die auf der X-Achse und der Y-Achse angezeigten Positionen auf und ab und links bzw. rechts.
Xaxis: {Kategorien: ['A', 'B', 'C'], Gegenteil: true}, yaxis: {type: 'datetime', gegenüber: true}7. invertiert
Diagramm: {Typ: 'Zeile', Stil: {fontsize: "17px",}, invertiert: true}8.min, max
Steuert die minimalen und maximalen Werte der Nummernachse.
HINWEIS: Controling erlaubteDecimals, min, maximale Eigenschaften, Sie können den Anzeigebereich der Nummernachse usw. problemlos steuern (dies ist auch ein sehr häufiges Problem)
Zusammenfassen
Das obige dreht sich alles um diesen Artikel. Hast du es gelernt? Der Herausgeber wird weiterhin die Artikel von Highcharts aktualisieren. Freunde, die sich für Highcharts interessieren, sollten weiterhin auf Wulin.com achten. Ich hoffe, dieser Artikel hilft Ihnen beim Lernen.