Highcharts Konfigurationsoptionen werden im Detail beschrieben
Highcharts Konfigurationsoptionen eine Menge von Parametern liefern, können Sie leicht angepasst Benutzeranforderungen Diagramme in diesem Abschnitt zu treffen, um mehr Highcharts Konfigurationsmöglichkeiten für den Einsatz, um herauszufinden:
Konfigurationsparameter (Attribute + Event)
chart.events.addSeries: Fügen Sie die Anzahl der Spalten der Tabelle.
chart.events.click: Klicken Sie auf ein Ereignis das gesamte Diagramm Grundstück aufgetreten.
chart.events.load: Chart Ladeereignis.
chart.events.redraw: Chart-Ereignis neu zu zeichnen, klicken Sie auf die Legende zeigt und kann versteckte Zeichnung auslösen.
chart.events.selection: Wenn die Diagrammkurve wählbar Zoom, wählen Sie das Diagramm, wenn der Betrieb das Ereignis auslösen kann.
chart.height: Höhendiagramm gezeichnet.
chart.inverted: Diagramm x, y-Achse an der Börse.
chart.polar: ob das Polardiagramm.
chart.reflow: Wenn die Fenstergröße ändert, wird die Breite des Diagramms adaptive Fenstergröße ändert.
chart.renderTo: das Diagramm laden, ist ein DOM-Objekt auf der Seite.
chart.showAxes: leere Tabelle, ob Achsen angezeigt werden soll.
chart.type: Diagrammtyp, Standardzeile gibt es Bar / Spalte / Kuchen ......
chart.width: die Breite der Zeichnungsfläche des Diagramms ist die Standard-adaptive.
chart.zoomType: Amplifikationstyp Daten im Diagramm des Berichts können Sie auf der X-Achse oder Y-Achse Zoom vergrößern, können Sie in XY-Zoom-Achsen gleichzeitig.
Farben: Die meisten Spalten in der Tabelle, die Anzahl der Spalten zwischen jeder Farbe. Ist ein Array ist, im Allgemeinen nicht bewegen.
Kredite .Enabled: ob die Anzeige der Copyright - Informationen zu ermöglichen.
credits.href: link urheberrechtlich geschützt.
credits.text: copyright Textinformationen angezeigt.
.buttons.exportButton.enabled exportieren: ob die Anzeige Export - Taste zu ermöglichen.
exporting.buttons.exportButton.menuItems: Menüoption Exportieren.
exporting.buttons.exportButton.onclick: Export-Button geklickt Ereignis, nicht interne Menü.
exporting.buttons.printButton.enabled: ob die Schaltfläche Drucken zu ermöglichen.
exporting.buttons.printButton.onclick: Drucktaste Ereignis klicken.
exporting.enabled: Druck und Export-Tasten sind nicht zulässig.
exporting.filename: ist der Dateiname der Exportdatei.
exporting.type: Standard Export-Bilddateiformate.
exporting.url: SVG Tabelle und Ausfuhr-Interface-Adresse.
exporing.width: Standardexportbildbreite.
Etiketten: Etiketten können in jede beliebige Position des Diagramms geladen werden, gibt es Elemente, Stil.
lang: Sprachparameterkonfiguration und Konfiguration auf den Export Button-Menü, Namen und andere Konfigurationszeit bezogen.
legend.enabled: ob Legende zu ermöglichen.
navigation.buttonOptions.enabled: Chart-Navigationstasten, ob das alles angeklickt werden kann.
plotOptions .area.allowPointSelect: ob die Click - Datenpunkte zu ermöglichen.
plotOptions.area.color: Zeichnungsfarbe.
plotOptions.area.dataLabels.enabled: ob die Datenbeschriftungen zu ermöglichen.
plotOptions.area.enableMouseTracking: ob die Daten in der Tabelle, Maus-Tracking-Blase Datenpunkt angezeigt wird, zu ermöglichen.
plotOptions.area.events.checkboxClick: Daten in der Diagrammlegende Checkbox Click-Ereignis.
plotOptions.area.events.click: Datentabellen, Datenpunkte Ereignis klicken.
plotOptions.area.events.hide: Daten-Chart, eine Datenfolge von Ereignissen, wenn sie versteckt.
plotOptions.area.events.show: Daten-Chart, eine Datenfolge von Ereignissen, wenn sie angezeigt werden.
plotOptions.area.events.legendItemClick: Daten-Chart, die Legende des Ereigniselement geklickt wird, die direkte Zuordnung falsch, es ist nicht anklickbar.
plotOptions.area.events.mouseOut: Maus Datenpunkte aus der Veranstaltung.
plotOptions.area.events.mouseOver: Maus Datenpunkte nach der Veranstaltung.
plotOptions.area.marker.enabled: ob das Diagramm Zeichnung Punkt-Tag angezeigt werden soll.
plotOptions.area.marker.states.hover.enabled: ob Tag Rollover-Status zu ermöglichen.
plotOptions.area.marker.states.select.enabled: ob Tag Auswahlstatus zu ermöglichen.
plotOptions.area.point.events.click: Chart jeden einzelnen Punkt Click-Ereignis.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: Event gelöscht Chart-Punkte verwendet werden.
plotOptions.area.point.events.select: Wählen Sie das Diagramm Mittelpunkt Ereignis.
plotOptions.area.point.events.unselect: Event-Chart Mittelpunkt, wenn abgewählt.
plotOptions.area.point.events.update: update-Ereignis tritt auf, wenn die Daten in der Tabelle.
plotOptions.area.visible: Beim Laden der Standarddatenreihe angezeigt oder verborgen.
plotOptions.area.zIndex: Im Falle von mehreren Sequenzen, passen Sie die Stapelreihenfolge jeder Sequenz.
Über point.events Gleiches gilt auch für den anderen Bereich von Klassendiagrammen (arearange, areaspline, areasplinerange), andere Histogramm (bar, Spalte) und alle Diagramme.
plotOptions.area.showInLegend: ob in der Legende zu zeigen.
plotOptions.area.stacking: ist der Wert des Stapels, der Stapel oder als Prozentsatz.
plotOptions.area.states.hover.enabled: ob der Staat zu erlauben, die Maus zu setzen.
plotOptions.area.stickyTracking: sticky-Tracking-Datenpunkte Maus.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange ähnlich dem plotOptions.area
plotOptions.bar.groupPadding: Für Balkendiagramme Paketintervall zwischen jedem Paket.
plotOptions.bar.grouping: ob zur Gruppe der Daten.
plotOptions.bar.minPointLength :: Definiert der Punktwert gleich Null ist, der Punkt der Mindestlänge für
plotOptions.bar.showInLegend: ob in der Legende zu zeigen.
plotOptions.bar.stacking: ist der Wert des Stapels, der Stapel oder als Prozentsatz (normal / Prozent).
plotOptions.column, plotOptions.columnrange ähnlich dem plotOptions.bar
plotOptions.line bezogene Konfiguration ist ähnlich plotOptions.area Konfiguration.
plotOptions.pie.ignoreHiddenPoint: Im Kreisdiagramm, eine bestimmte Sequenz von Legend verbergen klicken, um das gesamte Kreisdiagramm ist zu 100% eine Neuzuordnung oder versteckt nur auf der Grundlage des Originals, eine Lücke zeigt.
plotOptions.pie.innerSize: Wenn ein Kreisdiagramm Zeichnung, Kreisdiagramm Zentrum viel leer zu reservieren.
plotOptions.pie.slicedOffset: allowPointSelect in Verbindung verwenden, um mit, wenn der Punkt angeklickt wird, wird der entsprechende Sektor Schale, diese Konfigurationsparameter, der in einem Abstand angeordnet ist.
Andere häufige Konfigurationsparameter plotOptions.pie Ähnlichkeit mit plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline ähnliche Konfiguration ähnlich plotOptions.area Konfiguration.
Serie: ein Array.
series.data.color: ein Farbdaten.
series.data.dataLabels: eine Datenfolge Etikettendaten.
series.data.events zur Konfiguration von plotOptions.area.point.events ähnlich.
series.data.marker ähnlich der Konfiguration von plotOptions.area.marker.
series.data.name: Name der Konfigurationsdatenpunkte.
series.data.sliced: Konfigurieren Sie das Kreisdiagramm, wobei der Abstand der Sektorgröße zu trennen.
series.data.x: x-Wert des Punktes.
series.data.y: y-Wert des Punktes.
series.name: Name der Datensequenz.
series.stack: gestapelt Gruppenindex.
series.type: Datenfolge Anzeigetyp.
series.xAxis, series.yAxis: wenn mehrere Achsen verwendet, gibt an, welche Achse zu einer Anzahl von Spalten entspricht.
Untertitel: den Untertitel des Diagramms konfigurieren.
Titel: Der Titel des Diagramms Konfiguration.
Tooltip: Konfigurieren Blase Prompt Daten in der Tabelle.
tooltip.valueDecimals: Lassen Sie Dezimalstellen.
tooltip.percentageDecimals: Lassen Sie Prozentsatz der Dezimalstellen.
xAchse, Einstellungen yAchse Achskonfiguration
allowDecimals: ob die Achse Dezimalstellen zu ermöglichen.
Kategorien: eine Reihe von Klassifikations Achsen.
Handlungsstränge: Zeichnen Sie die Hauptleitung.
tickColor: Farbskala.
tickInterval: Schritt Werteskala.
labels.rotation: Skala Etiketten Rotationsgrad
Diagramm: Diagrammbereich Option
Chart chart Bereich Diagrammbereich Option wird verwendet, um die Eigenschaften einzustellen.
| Parameter | Beschreibung | Default |
|---|---|---|
| background | Einstellen Diagrammfläche Hintergrundfarbe | #FFFFFF |
| border | Stellen Sie die Grafik Rahmenbreite | 0 |
| borderRadius | Einstellen der Grenze, abgerundete Ecken | 5 |
| renderTo | Diagramm Behälter setzen, in der Regel in einem DIV html platziert, erhalten den Attributwert DIV id | nichtig |
| defaultSeriesType | Der Standarddiagrammtyp Linie, Spline, Fläche, areaspline, Säulen-, Balken-, Kreis-, Streu | 0 |
| Breite | Breite der Graphik nach dem Planbehälter Standardbreite adaptive | nichtig |
| Höhe | Höhendiagramm, das Standarddiagrammbehälter nach hoch adaptive | nichtig |
| Marge | Und andere Elemente in der Diagrammteilung Array, wie [0,0,0,0] | [Null] |
| plotBackgroundColor | Hintergrundfarbe Hauptdiagrammfläche Hintergrundfarbe, die X- und Y-Achsen des geschlossenen Bereich | nichtig |
| plotBorderColor | Die Farbe der Grenzregion grenzt an die Hauptgrafik, die X- und Y-Achsen des geschlossenen Bereich | nichtig |
| plotBorderWidth | Breite des Hauptdiagrammfläche Grenze | 0 |
| Schatten | Schatten gesetzt ist, müssen Sie die Hintergrundfarbe Backgroundcolor zu setzen. | falsch |
| Reflow | Ob mit der Diagrammfläche aus der Höhe und Breite, wenn nicht die Breite und Höhe eingestellt ist, wird die Größe adaptiv sein. | wahr |
| zoomType | Ziehen Sie die Maus zu vergrößern, Zoom entlang der X- oder Y-Achse, kann eingestellt werden: 'x', 'y', 'xy' | '' |
| Geschehen | Ereignis-Callback-Unterstützung addSeries Methode, klicken Sie auf die Methode, Load-Methode, Auswahlmethode der Callback-Funktion. |
Farbe: Farboptionen
Farboptionen für die Einstellung Farbschema Farbkarte.
| Parameter | Beschreibung | Default |
| Farbe | Für Farb-Display, eine Reihe von Diagrammen, Linie / bar / Kreisdiagramm so weiter. | Feld |
Highcharts bietet bereits mehrere Standard-Farbschema, wenn Sie Farbgrafiken mehr als Art angezeigt werden soll, werden weitere Grafiken automatisch von der ersten Farbschema Auswahl starten. Individuelle Farbschema Ansatz:
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});Titel: Titel-Optionen
Titel Bildunterschrift Option wird verwendet, um die relevanten Eigenschaften des Diagrammtitel zu setzen.
| Parameter | Beschreibung | Default |
|---|---|---|
| Text | Der Titeltext. | Diagrammtitel |
| ausrichten | Die horizontale Ausrichtung. | Zentrum |
| vertical | Die vertikale Ausrichtung. | Top |
| Marge | Zwischen dem Haupt Titel und Untertitel oder ein Diagramm Tonumfang. | 15 |
| schwimmend | Ob schwimmen, wenn sie wahr ist, kann der Titel aus dem Hauptdiagrammbereich versetzt werden, mit x, y-Attribut. | falsch |
| Stil | Stellen Sie CSS-Stile. | {Color: '# 3E576F', Schrift: '16px'} |
Untertitel: Untertitel-Optionen
Property Options im Wesentlichen den gleichen Titel mit dem Titel bieten Untertitel, der Titel zu den oben genannten Optionen beziehen kann, ist es erwähnenswert, dass die Untertiteltext Option ist standardmäßig '', dass leer ist, so der Untertitel standardmäßig nicht angezeigt.
xAchse: X-Achse Option
X-Achse Option wird verwendet, um das Diagramm X-Achse bezogenen Eigenschaften einzustellen.
| Parameter | Beschreibung | Default |
|---|---|---|
| Kategorien | Stellen Sie die X-Achse Kategorienamen, Arrays, zum Beispiel: Kategorien: [ 'Äpfel', 'Bananen', 'Orangen'] | [] |
| Titel | X-Achse Name, Unterstützung Text, aktiviert, Ausrichten, Drehen, Stil und andere Attribute | |
| Etiketten | Stellen Sie die X-Achse eines jeden Kategorienamen Stil Stil, Format Formatierer, den Drehwinkel und dergleichen. | Feld |
| max | X-Achsen-Maximalwert (Kategorien leer ist), wenn es null ist, dann wird der Maximalwert automatisch die X-Achsen-Daten zu einem Maximum entsprechen. | nichtig |
| min | X-Achse Minimum (Kategorien leer ist), wenn es null ist, dann wird der Minimalwert wird automatisch die X-Achsen-Daten auf ein Minimum entsprechen. | Feld |
| gridLineColor | Gitter (vertikal) Farbe | # C0C0C0 |
| Gridline | Gitter (vertikale Balken) Breite | 1 |
| linecolor | Baseline Farbe | # C0D0E0 |
| linewidth | Basislinienbreite | 0 |
yAchse: Y-Achse Option
Y-Achse Option steht im Einklang mit den oben genannten xAchse Optionen entnehmen Sie bitte der Tabelle im Parameter-Einstellungen sind nicht mehr gesondert aufgeführt.
Serie: Datenspaltenoptionen
Datenspalten Option wird verwendet, um das Diagramm Datensatz bezogene Eigenschaften zu zeigen.
| Parameter | Beschreibung | Default |
|---|---|---|
| Daten | Wird angezeigt, in der Tabelle Datenspalte, die ein Array oder JSON-formatierte Daten sein kann. Wie zum Beispiel: Daten: [0, 5, 3, 5], oder Daten: [{name: 'Punkt 1', y: 0}, {name: "Punkt 2 ', y: 5}] | '' |
| Name | Zeigt den Namen der Datenspalte. | '' |
| Typ | Spaltendatentypen, Support-Bereich, areaspline, Balken-, Säulen-, Linien-, Kreis-, streuen oder Spline | Linie |
plotOptions: Datenpunktoptionen
plotOptions verwendet, um die Diagrammdatenpunkte bezogenen Eigenschaften einzustellen. plotOptions Nach verschiedenen Diagrammtypen, ihre Eigenschaften festgelegt etwas anders, jetzt häufig verwendete Optionen aufgelistet.
| Parameter | Beschreibung | Default |
| freigegeben | Die Daten werden direkt auf den Datenpunkten angezeigt | falsch |
| allowPointSelect | Ob die Verwendung der Maus zu ermöglichen, die Datenpunkte auszuwählen, | falsch |
| Formatierer | Callback-Funktion, Datenanzeigeformat | Formatierer: function () {return this.y;} |
Tooltip: Ballon-Datenpunkte
Tooltip Informationen zum Einstellen der Souffleurkasten, wenn die Maus Dia Datenpunkt angezeigt wird.
| Parameter | Beschreibung | Default |
| freigegeben | Ob das Eingabefeld angezeigt werden | wahr |
| background | Stellen Sie die Hintergrundfarbe Ballon | rgba (255, 255, 255, .85) |
| border | Ballon-Grenze Farbe, Standard-Datenspalte automatisch die Farbe übereinstimmen | auto |
| borderRadius | Der Ballon Runde Winkel | 5 |
| Schatten | Ob die Promptbox Schatten anzuzeigen | wahr |
| Stil | Einstellen Ballon Inhalt Stile, wie Schriftfarbe, usw. | Farbe: '# 333' |
| Formatierer | Callback-Funktion die Ausgabe von Ballon-Anzeige zu formatieren. Zurück Support-Inhalte wie HTML-Tags: <b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Legende: Legend Option
Legende Legende wird verwendet, um die Eigenschaften einzustellen.
| Parameter | Beschreibung | Default |
|---|---|---|
| Layout | Anzeigeformat, vertikal vertikalen und horizontalen Ebene der Unterstützung | horizontal |
| ausrichten | Ausrichtung. | Zentrum |
| background | Legend Hintergrundfarbe. | nichtig |
| border | Legend Rahmenfarbe. | # 909090 |
| borderRadius | Legend Grenzwinkel | 5 |
| freigegeben | Ob die Legende angezeigt werden | wahr |
| schwimmend | Ich kann schwimmen, mit x, y Eigenschaften. | falsch |
| Schatten | Ob Schatten angezeigt werden | falsch |
| Stil | Der Inhalt der Legende Stil | '' |
Nähere Informationen finden Sie auf der offiziellen Website der Dokumentation highcharts Englisch: http://api.highcharts.com/highcharts