Übersicht
Ein Histogramm ist ein Diagramm, in dem numerische Daten in Klassen gruppiert sind und die Klassen als segmentierte Spalten angezeigt werden. Sie dienen dazu, die Verteilung eines Datasets darzustellen, d. h. wie oft Werte in Bereiche liegen.
In Google Charts wird die Anzahl der Container automatisch ausgewählt. Alle Klassen haben die gleiche Breite und eine Höhe, die proportional zur Anzahl der Datenpunkte im Container ist. Ansonsten ähneln Histogramme Säulendiagrammen.
Beispiel
Hier ist ein Histogramm der Dinosaurierlänge:
Das Histogramm zeigt, dass der am häufigsten vorkommende Container kleiner als 10 Meter ist und dass es nur einen Dinosaurier über 40 Meter gibt. Wenn wir den Mauszeiger über den Balken bewegen, sehen wir, dass es sich um den Seismosaurus handelt (der möglicherweise nur ein sehr großer Diplodocus ist; Paläontologen sind sich nicht sicher).
Den Code zum Generieren dieses Histogramms sehen Sie unten. Nachdem Sie die Daten definiert haben (hier mit google.visualization.arrayToDataTable
), wird das Diagramm durch einen Aufruf von google.visualization.Histogram
definiert und mit der Methode draw
gezeichnet.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Die Beschriftungen (hier die Namen der Dinosaurier) können weggelassen werden. In diesem Fall zeigen die Kurzinfos nur den numerischen Wert an.
Farben steuern
Hier ist ein Histogramm der nationalen Bevölkerung:
Es gibt über 200 Länder mit weniger als 100 Millionen Einwohnern und anschließend starkem Rückgang.
In diesem Histogramm werden die Daten mit der Option colors
grün dargestellt:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
Wie bei allen Google-Diagrammen können Farben entweder als englische Namen oder als Hexadezimalwerte angegeben werden.
Buckets steuern
Standardmäßig wählt Google Charts die Bucket-Größe automatisch mit einem bekannten Algorithmus für Histogramme. Manchmal möchten Sie dies jedoch überschreiben. Das obige Diagramm ist ein Beispiel. Angesichts so vieler Länder in der ersten Gruppe ist es schwer, sie in anderen zu untersuchen.
In solchen Situationen bietet das Histogramm zwei Optionen: histogram.bucketSize
, die den Algorithmus überschreibt und die Bucket-Größe hartcodiert, und histogram.lastBucketPercentile
. Für die zweite Option sind weitere Erläuterungen erforderlich: Sie ändert die Berechnung der Bucket-Größen, sodass die Werte, die über oder unter den verbleibenden Werten liegen, um den von Ihnen angegebenen Prozentsatz ignoriert werden. Die Werte sind weiterhin im Histogramm enthalten, haben aber keinen Einfluss darauf, wie sie in Buckets aufgeteilt werden. Dies ist nützlich, wenn Ausreißer nicht in ihren eigenen Buckets landen sollen. Sie werden stattdessen mit dem ersten oder dem letzten Bucket gruppiert.
Im obigen Diagramm wurden die oberen und unteren fünf Prozent der Werte bei der Berechnung der Bucket-Größe ignoriert. Die Werte sind weiterhin im Diagramm dargestellt. Das Einzige, was geändert wird, ist die Bucket-Größe, aber dadurch ist das Histogramm besser lesbar.
Dieses Beispiel zeigt auch, wie wir die Skalierung der vertikalen Achse so ändern können, dass die Skala „Mirror Log“ verwendet wird. Dies ist auch hilfreich, wenn Daten grafisch dargestellt werden, die einen langen Abschnitt kleiner Werte haben.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
Wie Sie sehen, hat das Entfernen der oberen und unteren fünf Prozent aus der Berechnung zu einer Bucket-Größe von 10.000.000 und nicht zu den 100.000.000 Prozent geführt, die es sonst gewesen wäre. Wenn Sie schon immer gewusst hätten, dass eine Bucket-Größe von 10.000.000 Ihren Anforderungen entspricht, hätten Sie dazu histogram.bucketSize
verwenden können:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { bucketSize: 10000000 } };
Im folgenden Beispiel wird gezeigt, wie Sie den Bereich der Buckets erweitern und viel mehr Buckets ohne Lücke zwischen ihnen anzeigen. Mit der Option maxNumBuckets
kann die Standardanzahl der Buckets erhöht werden. Mit den Optionen histogram.minValue
und histogram.maxValue
wird der Bereich der Buckets erweitert. Wenn jedoch Daten außerhalb dieses Bereichs vorhanden sind, verkleinern diese Optionen den Bereich nicht.
Dieses Beispiel zeigt auch, dass Sie mit der expliziten ticks
-Option für hAxis
die Ticks angeben können, die für jeden der Buckets angezeigt werden sollen. Dies wirkt sich nicht auf die Buckets selbst aus, sondern nur darauf, wie die Ticks angezeigt werden.
Beachten Sie auch, dass chartArea.width
so angegeben wird, dass die Anzahl der Buckets ohne visuelle Artefakte genauer passt. Im Folgenden sehen Sie die Optionen für dieses Beispiel.
var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 405 }, hAxis: { ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1] }, bar: { gap: 0 }, histogram: { bucketSize: 0.01, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
Mehrere Reihen
Hier ist ein Histogramm der Ladungen subatomarer Teilchen nach dem Standardmodell:
Das obige Diagramm enthält eine Reihe mit allen Partikeln. Subatomare Teilchen können in vier Gruppen unterteilt werden: Quarks, Leptonen und Bosonnen. Behandeln wir jedes Element als eigene Serie:
In diesem Diagramm verwenden wir für jeden der vier Arten von subatomaren Partikeln eine andere Reihe (und damit eine Farbe). Wir setzen interpolateNulls
explizit auf false
, damit die Nullwerte, die erforderlich sind, da die Reihen unterschiedlicher Länge sind, nicht dargestellt werden. Außerdem legen wir legend.maxLines
fest, um der Legende eine weitere Zeile hinzuzufügen:
var data = google.visualization.arrayToDataTable([ ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'], [2/3, -1, 0, 0], [2/3, -1, 0, null], [2/3, -1, 0, null], [-1/3, 0, 1, null], [-1/3, 0, -1, null], [-1/3, 0, null, null], [-1/3, 0, null, null] ]); var options = { title: 'Charges of subatomic particles', legend: { position: 'top', maxLines: 2 }, colors: ['#5C3292', '#1A8763', '#871B47', '#999999'], interpolateNulls: false, };
Wird geladen
Der Paketname google.charts.load
lautet "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Der Klassenname der Visualisierung lautet google.visualization.Histogram
:
var visualization = new google.visualization.Histogram(container);
Datenformat
Es gibt zwei Möglichkeiten, eine Histogramm-Datentabelle zu füllen. Wenn es nur eine Reihe gibt:
var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Name 1', number1], ['Name 2', number2], ['Name 3', number3], ... ]);
...und wenn es mehrere Reihen gibt:
var data = google.visualization.arrayToDataTable([ ['Series Name 1', 'Series Name 2', 'Series Name 3', ...], [series1_number1, series2_number1, series3_number1, ...], [series1_number2, series2_number2, series3_number2, ...], [series1_number3, series2_number3, series3_number3, ...], ... ]);
Derzeit werden für Histogramme keine optionalen Spaltenrollen unterstützt.
Konfigurationsoptionen
Name | |
---|---|
animation.duration |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Dokumentation zu Animationen. Typ:Zahl
Standard: 0
|
animation.easing |
Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:
Typ: String
Standardeinstellung: „linear“
|
animation.startup |
Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei Typ: Boolesch
Standard falsch
|
axisTitlesPosition |
Die Position der Achsentitel im Vergleich zum Diagrammbereich. Unterstützte Werte:
Typ: String
Standard: „out“
|
backgroundColor |
Die Hintergrundfarbe für den Hauptbereich des Diagramms. Dies kann entweder ein einfacher HTML-Farbstring wie Typ:String oder Objekt
Standard: 'white'
|
backgroundColor.stroke |
Die Farbe des Diagrammrahmens als HTML-Farbstring. Typ: String
Standard: #666
|
backgroundColor.strokeWidth |
Die Rahmenbreite in Pixeln. Typ:Zahl
Standard: 0
|
backgroundColor.fill |
Die Füllfarbe des Diagramms als HTML-Farbstring. Typ: String
Standard: 'white'
|
bar.groupWidth |
Die Breite einer Balkengruppe, angegeben in einem der folgenden Formate:
Typ:Zahl oder String
Standard: Das Golden-Verhältnis von etwa 61,8 %.
|
chartArea |
Ein Objekt mit Mitgliedern zum Konfigurieren der Position und Größe des Diagrammbereichs, in dem das Diagramm selbst gezeichnet wird, ohne Achse und Legenden. Es werden zwei Formate unterstützt: eine Zahl oder eine Zahl gefolgt von %. Eine einfache Zahl ist ein Wert in Pixeln, eine Zahl gefolgt von % ein Prozentsatz. Beispiel: Typ:Objekt
Standard:null
|
chartArea.backgroundColor |
Hintergrundfarbe des Diagrammbereichs. Ein String kann entweder ein hexadezimaler String (z.B. '#fdc') oder einem englischen Farbnamen. Wenn ein Objekt verwendet wird, können die folgenden Attribute angegeben werden:
Typ:String oder Objekt
Standard: 'white'
|
chartArea.left |
Legt fest, wie weit das Diagramm von der linken Rahmenlinie entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
chartArea.top |
Legt fest, wie weit das Diagramm vom oberen Rand entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
chartArea.width |
Diagrammbereichbreite. Typ:Zahl oder String
Standard:automatisch
|
chartArea.height |
Höhe des Diagrammbereichs. Typ:Zahl oder String
Standard:automatisch
|
Farben |
Die Farben, die für die Diagrammelemente verwendet werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: Typ:String-Array
Standard:Standardfarben
|
dataOpacity |
Die Transparenz von Datenpunkten, wobei 1.0 vollständig undurchsichtig und 0.0 vollständig transparent ist. In Streu-, Histogramm-, Balken- und Säulendiagrammen bezieht sich dies auf die sichtbaren Daten: Punkte im Streudiagramm und Rechtecke in den anderen. In Diagrammen, in denen bei der Datenauswahl ein Punkt erstellt wird, z. B. bei Linien- und Flächendiagrammen, bezieht sich dies auf die Kreise, die angezeigt werden, wenn Sie den Mauszeiger darauf bewegen oder eine Auswahl treffen. Das Kombinationsdiagramm weist beide Verhaltensweisen auf und diese Option hat keine Auswirkungen auf andere Diagramme. Informationen zum Ändern der Deckkraft einer Trendlinie finden Sie unter Deckkraft der Trendlinie . Typ:Zahl
Standard: 1,0
|
enableInteractivity |
Gibt an, ob im Diagramm nutzerbasierte Ereignisse ausgelöst oder auf Nutzerinteraktionen reagiert werden Bei „false“ gibt das Diagramm keine „select“- oder anderen interaktionsbasierten Ereignisse aus (aber wir werden Bereit- oder Fehlerereignisse auslösen) und kein Hovertext anzeigen und sich je nach Nutzereingabe nicht anderweitig ändern. Typ: Boolesch
Standardeinstellung:true
|
focusTarget |
Der Typ der Entität, auf die das Bewegen des Mauszeigers folgt. Außerdem wirkt sich dies darauf aus, welche Entität per Mausklick ausgewählt und welchem Datentabellenelement Ereignisse zugeordnet wird. Folgende Werte sind möglich:
Unter „FocusTarget“ (Kategorie) werden in der Kurzinfo alle Kategoriewerte angezeigt. Dies kann nützlich sein, um Werte verschiedener Reihen zu vergleichen. Typ: String
Standard: 'datum'
|
fontSize |
Die Standardschriftgröße des gesamten Textes im Diagramm in Pixeln. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben. Typ:Zahl
Standard:automatisch
|
fontName |
Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben. Typ: String
Standardeinstellung: 'Arial'
|
forceIFrame |
Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.) Typ: Boolesch
Standard: false
|
hAxis |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener horizontaler Achsenelemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Typ:Objekt
Standard:null
|
hAxis.gridlines |
Ein Objekt mit Eigenschaften zum Konfigurieren der Gitternetzlinien auf der horizontalen Achse. Gitternetzlinien für horizontale Achsen werden vertikal gezeichnet. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {color: '#333', minSpacing: 20} Typ:Objekt
Standard:null
|
hAxis.gridlines.color |
Die Farbe der horizontalen Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard: #CCC
|
hAxis.gridlines.count |
Die ungefähre Anzahl der horizontalen Gitternetzlinien im Diagrammbereich.
Wenn Sie eine positive Zahl für Typ:Zahl
Standard: -1
|
hAxis.gridlines.interval |
Ein Array von Größen (als Datenwerte, nicht als Pixel) zwischen benachbarten Gitternetzlinien. Diese Option gilt derzeit nur für numerische Achsen. Sie ist jedoch analog zu den Typ:Zahl zwischen 1 und 10, ohne 10
Standard: berechnet
|
hAxis.gridlines.minSpacing |
Der Mindestabstand auf dem Bildschirm in Pixeln zwischen den Hauptgitternetzlinien der hAxis.
Die Standardeinstellung für große Gitternetzlinien ist Typ:Zahl
Standard: berechnet
|
hAxis.gridlines.multiple |
Alle Werte für Gitternetzlinien und Teilstriche müssen ein Vielfaches des Werts dieser Option sein. Im Gegensatz zu Intervallen werden Potenzen des 10-Fachen des Vielfachen nicht berücksichtigt.
Sie können also festlegen, dass die Ticks Ganzzahlen sind, indem Sie Typ:Zahl
Standard: 1
|
hAxis.gridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datums-/Datums-/Uhrzeitdatentypen, wenn sie mit berechneten Gitternetzlinien im Diagramm verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
hAxis.minorGridlines |
Ein Objekt mit Mitgliedern zum Konfigurieren der kleinen Gitternetzlinien auf der horizontalen Achse, ähnlich wie bei der Option „hAxis.gridlines“. Typ:Objekt
Standard:null
|
hAxis.minorGridlines.color |
Die Farbe der horizontalen kleineren Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard:Eine Mischung aus Gitternetz- und Hintergrundfarben
|
hAxis.minorGridlines.count |
Die Option Typ:Zahl
Standard: 1
|
hAxis.minorGridlines.interval |
Die Option „MinorGridlines.interval“ entspricht der Intervalloption „MajorGridlines.interval“. Das ausgewählte Intervall ist jedoch immer ein gerader Divisor des Intervalls für die großen Gitternetzlinien.
Das Standardintervall für lineare Skalen ist Typ:Zahl
Standard: 1
|
hAxis.minorGridlines.minSpacing |
Der erforderliche Mindestabstand in Pixeln zwischen benachbarten kleinen Gitternetzlinien sowie zwischen kleinen und großen Gitternetzlinien. Der Standardwert ist 1/2 der minSpacing der wichtigsten Gitternetzlinien bei linearen Skalen und 1/5 der minSpacing bei logarithmischen Skalen. Typ:Zahl
Standard:berechnet
|
hAxis.minorGridlines.multiple |
Wie für die Haupt- Typ:Zahl
Standard: 1
|
hAxis.minorGridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datum/Uhrzeit/Uhrzeit-Datentypen, wenn sie mit berechneten MinorGridlines für Diagramme verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
hAxis.textPosition |
Position des Textes der horizontalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „none“. Typ: String
Standard: „out“
|
hAxis.textStyle |
Ein Objekt, das den Textstil der horizontalen Achse angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.title |
Typ: String
Standard:null
|
hAxis.titleTextStyle |
Ein Objekt, das den Textstil für den Titel der horizontalen Achse angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
Bei „false“ werden die äußersten Beschriftungen ausgeblendet, damit sie nicht vom Diagrammcontainer zugeschnitten werden können. Falls wahr, wird das Zuschneiden von Labels zugelassen. Typ: Boolesch
Standard: false
|
hAxis.slantedText |
Bei Einstellung auf „true“ zeichnen Sie den Text der horizontalen Achse schräg, damit mehr Text entlang der Achse passt. Ist dies „false“, zeichnen Sie den Text der horizontalen Achse aufrecht. Standardmäßig wird der Text geneigt, wenn er nicht vollständig passt, wenn er aufrecht gezeichnet wird. Diese Option ist nur verfügbar, wenn Typ: Boolesch
Standard:automatisch
|
hAxis.slantedTextAngle |
Der Winkel des Textes der horizontalen Achse, wenn er schräg gezeichnet ist. Wird ignoriert, wenn Typ:Zahl, -90–90
Standard: 30
|
hAxis.maxAlternation |
Maximale Anzahl an Textebenen der horizontalen Achse. Wenn die Achsentextlabels zu voll werden, kann der Server die benachbarten Labels nach oben oder unten verschieben, um sie näher beieinander zu platzieren. Dieser Wert gibt die meisten zu verwendenden Ebenen an. Der Server kann weniger Ebenen verwenden, wenn die Labels ohne Überschneidungen passen. Der Standardwert für Datum und Uhrzeit ist „1“. Typ:Zahl
Standard: 2
|
hAxis.maxTextLines |
Maximal zulässige Zeilenanzahl für die Textlabels. Labels können mehrere Zeilen umfassen, wenn sie zu lang sind. Die Anzahl der Zeilen wird standardmäßig durch die Höhe des verfügbaren Platzes begrenzt. Typ:Zahl
Standard:automatisch
|
hAxis.minTextSpacing |
Zulässiger horizontaler Mindestabstand in Pixeln zwischen zwei benachbarten Textlabels. Wenn die Labels zu eng oder zu lang sind, kann der Abstand unter diesen Grenzwert fallen. In diesem Fall wird eine der Label zur Aufklärung angewendet, z. B. werden die Labels abgeschnitten oder einige davon entfernt. Typ:Zahl
Standard: Der Wert von
hAxis.textStyle.fontSize |
hAxis.showTextEvery |
Die Anzahl der anzuzeigenden Labels der horizontalen Achsen, wobei 1 bedeutet, dass jedes Label angezeigt wird, 2 bedeutet, dass alle Labels angezeigt werden usw. Standardmäßig wird versucht, so viele Labels wie möglich anzuzeigen, die sich nicht überschneiden. Typ:Zahl
Standard:automatisch
|
hAxis.viewWindowMode |
Gibt an, wie die horizontale Achse skaliert werden soll, um die Werte im Diagrammbereich zu rendern. Die folgenden Stringwerte werden unterstützt:
Typ: String
Standard: Entspricht "pretty", aber
haxis.viewWindow.min und haxis.viewWindow.max haben Vorrang, wenn sie verwendet werden.
|
hAxis.viewWindow |
Gibt den Zuschneidebereich der horizontalen Achse an. Typ:Objekt
Standard:null
|
hAxis.viewWindow.max |
Der nullbasierte Zeilenindex, an dem das Zuschneidefenster endet. Datenpunkte bei diesem und höher werden ausgeschnitten. In Verbindung mit Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
hAxis.viewWindow.min |
Der nullbasierte Zeilenindex, an dem das Zuschneidefenster beginnt. Datenpunkte, die an Indexwerten unter diesem Wert liegen, werden abgeschnitten. In Verbindung mit Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
histogram.bucketSize |
Codieren Sie die Größe jedes Histogrammbalkens hart, anstatt sie algorithmisch bestimmen zu lassen. Typ:Zahl
Standard:automatisch
|
histogram.hideBucketItems |
Lassen Sie die dünnen Trennlinien zwischen den Blöcken des Histogramms aus und machen Sie daraus eine Reihe durchgehender Balken. Typ: Boolesch
Standard: false
|
histogram.lastBucketPercentile |
Ignorieren Sie beim Berechnen der Bucket-Größe des Histogramms die oberen und unteren Typ:Zahl
Standard: 0
|
histogram.minValue |
Erweitern Sie den Bucket-Bereich, um diesen Wert aufzunehmen. Typ:Zahl
Standard:Automatisch – Mindestdatenverbrauch
|
histogram.maxValue |
Erweitern Sie den Bucket-Bereich, um diesen Wert aufzunehmen. Typ:Zahl
Standard:Automatisch – max. Datenvolumen verwenden
|
histogram.numBucketsRule |
So berechnen Sie die Standardanzahl von Buckets. Folgende Werte sind möglich:
Typ: String
Standard:
'sqrt' |
height |
Höhe des Diagramms in Pixeln Typ:Zahl
Standard:Höhe des beinhaltenden Elements
|
interpolateNulls |
Gibt an, ob der Wert der fehlenden Punkte erraten werden soll. Wenn dieser Wert auf „true“ gesetzt ist, wird der Wert fehlender Daten anhand von benachbarten Punkten erraten. Bei „false“ wird an der unbekannten Stelle ein Zeilenumbruch hinterlassen.
Dies wird von Flächendiagrammen mit der Option Typ: Boolesch
Standard: false
|
isStacked |
Wenn dieser Wert auf „true“ gesetzt ist, werden die Elemente für alle Reihen bei jedem Domainwert gestapelt. Hinweis: In Säulendiagrammen, Flächendiagrammen und SteppedArea kehrt Google Charts die Reihenfolge der Legendenelemente um, damit sie besser mit der Stapelung der Reihenelemente übereinstimmen. So ist Reihe 0 das unterste Legendenelement. Dies gilt nicht für Balkendiagramme.
Die Option Für
Bei einer Stapelung von 100% wird der berechnete Wert für jedes Element in der Kurzinfo nach seinem tatsächlichen Wert angezeigt.
Die Zielachse verwendet standardmäßig Tickwerte basierend auf der relativen Skala von 0–1 als Bruchteile von 1 für
Eine 100-%-Stapelung unterstützt nur Datenwerte vom Typ Typ:boolescher Wert/String
Standard: false
|
Legende |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Legende. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ:Objekt
Standard:null
|
legend.alignment |
Ausrichtung der Legende. folgende Arten von Werten sind möglich:
Anfang, Mitte und Ende beziehen sich auf den Stil - vertikal oder horizontal - der Legende. In einer Legende „rechts“ befinden sich beispielsweise „start“ und „end“ oben bzw. unten. Bei einer Legende „oben“ befinden sich „start“ und „end“ links bzw. rechts neben dem Bereich. Der Standardwert hängt von der Position der Legende ab. Für Legenden am unteren Rand ist der Standardwert „center“, andere Legenden auf „start“. Typ: String
Standard:automatisch
|
legend.maxLines |
Maximale Anzahl der Zeilen in der Legende. Geben Sie eine Zahl größer als 1 ein, um der Legende Linien hinzuzufügen. Hinweis: Die genaue Logik, mit der die tatsächliche Anzahl der gerenderten Zeilen ermittelt wird, ist noch im Wandel. Diese Option funktioniert derzeit nur, wenn „legende.position“ den Wert „top“ hat. Typ:Zahl
Standard: 1
|
legend.pageIndex |
Ursprünglich ausgewählter nullbasierter Seitenindex der Legende. Typ:Zahl
Standard: 0
|
legend.position |
Position der Legende. folgende Arten von Werten sind möglich:
Typ: String
Standard: „right“
|
legend.textStyle |
Ein Objekt, das den Textstil der Legende angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Ausrichtung |
Die Ausrichtung des Diagramms. Wenn dieser Wert auf Typ: String
Standard:horizontal
|
reverseCategories |
Wird die Richtlinie auf „true“ gesetzt, wird die Reihe von rechts nach links gezeichnet. Standardmäßig wird von links nach rechts gezeichnet. Typ: Boolesch
Standard: false
|
Serien |
Ein Array von -Objekten, die jeweils das Format der entsprechenden Reihe im Diagramm beschreiben. Geben Sie ein leeres Objekt {} an, um Standardwerte für eine Reihe zu verwenden. Wenn keine Reihe oder kein Wert angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Eigenschaften:
Sie können entweder ein Array von Objekten angeben, die jeweils für die Reihe in der angegebenen Reihenfolge gelten, oder ein Objekt angeben, bei dem jedes untergeordnete Element einen numerischen Schlüssel hat, der angibt, für welche Reihe es gilt. Die folgenden beiden Deklarationen sind beispielsweise identisch: Die erste Reihe wird als schwarz und nicht in der Legende deklariert, während die vierte als rot und nicht in der Legende fehlt: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Typ:Array von Objekten oder Objekt mit verschachtelten Objekten
Standard: {}
|
Design |
Ein Design ist eine Reihe vordefinierter Optionswerte, die im Zusammenspiel ein bestimmtes Diagrammverhalten oder einen bestimmten visuellen Effekt erzielen. Derzeit ist nur ein Design verfügbar:
Typ: String
Standard:null
|
Titel |
Text, der über dem Diagramm angezeigt werden soll. Typ: String
Standard: kein Titel
|
titlePosition |
Wo der Diagrammtitel im Vergleich zum Diagrammbereich platziert werden soll. Unterstützte Werte:
Typ: String
Standard: „out“
|
titleTextStyle |
Ein Objekt, das den Textstil für den Titel angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Kurzinfo |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ:Objekt
Standard:null
|
tooltip.isHtml |
Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML- und keine SVG-gerenderten Kurzinfos verwendet. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen. Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von der Visualisierung Blasendiagramm nicht unterstützt. Typ: Boolesch
Standard: false
|
tooltip.showColorCode |
Falls wahr, werden neben den Reiheninformationen in der Kurzinfo farbige Quadrate angezeigt. Der Standardwert ist „true“, wenn Typ: Boolesch
Standard:automatisch
|
tooltip.textStyle |
Ein Objekt, das den Textstil für die Kurzinfo angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:
Typ: String
Standard: „Fokus“
|
vAxes |
Gibt Eigenschaften für einzelne vertikale Achsen an, wenn das Diagramm mehrere vertikale Achsen hat.
Jedes untergeordnete Objekt ist ein
Wenn Sie ein Diagramm mit mehreren vertikalen Achsen angeben möchten, definieren Sie zuerst eine neue Achse mit { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Diese Eigenschaft kann entweder ein Objekt oder ein Array sein: Das Objekt ist eine Sammlung von Objekten, von denen jedes ein numerisches Label für die Achse hat, die es definiert. Dies ist das oben gezeigte Format. Das Array ist ein Array von Objekten, eines pro Achse. Die folgende Schreibweise im Arraystil ist beispielsweise mit dem oben gezeigten Objekt vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Typ:Array eines Objekts oder eines Objekts mit untergeordneten Objekten
Standard:null
|
vAxis |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener vertikaler Achsenelemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Typ:Objekt
Standard:null
|
vAxis.baseline |
Typ:Zahl
Standard:automatisch
|
vAxis.baselineColor |
Gibt die Farbe der Baseline für die vertikale Achse an. Kann ein beliebiger HTML-Farbstring sein, z. B. Typ:Zahl
Standard: 'black'
|
vAxis.direction |
Die Richtung, in der die Werte entlang der vertikalen Achse wachsen. Standardmäßig werden niedrige Werte unten im Diagramm angezeigt. Geben Sie Typ:1 oder -1
Standard: 1
|
vAxis.format |
Ein Formatstring für Beschriftungen numerischer Achsen. Dies ist eine Teilmenge des
Mustersatzes der ICU
.
Die tatsächliche Formatierung, die auf das Label angewendet wird, wird aus der Sprache abgeleitet, mit der die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .
Bei der Berechnung von Teilstrichen und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinienoptionen berücksichtigt. Alternativen werden abgelehnt, wenn die formatierten Teilstriche dupliziert werden oder sich überschneiden.
Sie können also Typ: String
Standard:automatisch
|
vAxis.gridlines |
Ein Objekt mit Mitgliedern zum Konfigurieren der Gitternetzlinien auf der vertikalen Achse. Beachten Sie, dass Gitternetzlinien für vertikale Achsen horizontal gezeichnet werden. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {color: '#333', minSpacing: 20} Typ:Objekt
Standard:null
|
vAxis.gridlines.color |
Die Farbe der vertikalen Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard: #CCC
|
vAxis.gridlines.count |
Die ungefähre Anzahl der horizontalen Gitternetzlinien im Diagrammbereich.
Wenn Sie eine positive Zahl für Typ:Zahl
Standard: -1
|
vAxis.gridlines.interval |
Ein Array von Größen (als Datenwerte, nicht als Pixel) zwischen benachbarten Gitternetzlinien. Diese Option gilt derzeit nur für numerische Achsen. Sie ist jedoch analog zu den Typ:Zahl zwischen 1 und 10, ohne 10
Standard: berechnet
|
vAxis.gridlines.minSpacing |
Der Mindestabstand auf dem Bildschirm in Pixeln zwischen den Hauptgitternetzlinien der hAxis.
Die Standardeinstellung für große Gitternetzlinien ist Typ:Zahl
Standard: berechnet
|
vAxis.gridlines.multiple |
Alle Werte für Gitternetzlinien und Teilstriche müssen ein Vielfaches des Werts dieser Option sein. Im Gegensatz zu Intervallen werden Potenzen des 10-Fachen des Vielfachen nicht berücksichtigt.
Sie können also festlegen, dass die Ticks Ganzzahlen sind, indem Sie Typ:Zahl
Standard: 1
|
vAxis.gridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datums-/Datums-/Uhrzeitdatentypen, wenn sie mit berechneten Gitternetzlinien im Diagramm verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
vAxis.minorGridlines |
Ein Objekt mit Mitgliedern zum Konfigurieren der kleinen Gitternetzlinien auf der vertikalen Achse, ähnlich wie bei der Option „vAxis.gridlines“. Typ:Objekt
Standard:null
|
vAxis.minorGridlines.color |
Die Farbe der vertikalen kleineren Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard:Eine Mischung aus Gitternetz- und Hintergrundfarben
|
vAxis.minorGridlines.count |
Die Option „MinorGridlines.count“ wurde größtenteils verworfen, mit der Ausnahme, dass kleinere Gitternetzlinien durch Festlegen der Anzahl auf „0“ deaktiviert werden. Die Anzahl der kleineren Gitternetzlinien hängt vom Intervall zwischen den großen Gitternetzlinien (siehe „vAxis.gridlines.interval)“ und dem erforderlichen Mindestabstand ab (siehe „vAxis.minorGridlines.minSpacing“). Typ:Zahl
Standard: 1
|
vAxis.minorGridlines.interval |
Die Option „MinorGridlines.interval“ entspricht der Intervalloption „MajorGridlines.interval“. Das ausgewählte Intervall ist jedoch immer ein gerader Divisor des Intervalls für die großen Gitternetzlinien.
Das Standardintervall für lineare Skalen ist Typ:Zahl
Standard: 1
|
vAxis.minorGridlines.minSpacing |
Der erforderliche Mindestabstand in Pixeln zwischen benachbarten kleinen Gitternetzlinien sowie zwischen kleinen und großen Gitternetzlinien. Der Standardwert ist 1/2 der minSpacing der wichtigsten Gitternetzlinien bei linearen Skalen und 1/5 der minSpacing bei logarithmischen Skalen. Typ:Zahl
Standard:berechnet
|
vAxis.minorGridlines.multiple |
Wie für die Haupt- Typ:Zahl
Standard: 1
|
vAxis.minorGridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datum/Uhrzeit/Uhrzeit-Datentypen, wenn sie mit berechneten MinorGridlines für Diagramme verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
vAxis.logScale |
Falls wahr, wird die vertikale Achse zu einer logarithmischen Skala. Hinweis: Alle Werte müssen positiv sein. Typ: Boolesch
Standard: false
|
vAxis.scaleType |
Typ: String
Standard:null
|
vAxis.textPosition |
Position des Textes der vertikalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „none“. Typ: String
Standard: „out“
|
vAxis.textStyle |
Ein Objekt, das den Textstil der vertikalen Achse angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Ersetzt die automatisch generierten Ticks auf der Y-Achse durch das angegebene Array. Jedes Element des Arrays sollte entweder ein gültiger Tick-Wert (z. B. eine Zahl, ein Datum, Datum/Uhrzeit oder Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft
Das ViewWindow wird automatisch um den Mindest- und Höchstwert erweitert, sofern Sie keine Beispiele:
Typ:Array von Elementen
Standard:automatisch
|
vAxis.title |
Typ: String
Standard: kein Titel
|
vAxis.titleTextStyle |
Ein Objekt, das den Textstil für den Titel der vertikalen Achse angibt. Das Objekt hat folgendes Format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Verschiebt den Maximalwert der vertikalen Achse auf den angegebenen Wert; dieser Wert ist in den meisten Diagrammen höher. Wird ignoriert, wenn dieser auf einen Wert festgelegt wird, der kleiner als der maximale y-Wert der Daten ist.
Typ:Zahl
Standard:automatisch
|
vAxis.minValue |
Verschiebt den Mindestwert der vertikalen Achse auf den angegebenen Wert. In den meisten Diagrammen ist dieser Wert abwärts. Wird ignoriert, wenn dieser auf einen Wert festgelegt ist, der größer als der minimale y-Wert der Daten ist.
Typ:Zahl
Standard:null
|
vAxis.viewWindowMode |
Gibt an, wie die vertikale Achse skaliert werden soll, um die Werte im Diagrammbereich zu rendern. Die folgenden Stringwerte werden unterstützt:
Typ: String
Standard: Entspricht "pretty", aber
vaxis.viewWindow.min und vaxis.viewWindow.max haben Vorrang, wenn sie verwendet werden.
|
vAxis.viewWindow |
Gibt den Zuschneidebereich der vertikalen Achse an. Typ:Objekt
Standard:null
|
vAxis.viewWindow.max |
Der maximale vertikale Datenwert, der gerendert werden soll. Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
vAxis.viewWindow.min |
Der minimale vertikale Datenwert, der gerendert werden soll. Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard:Breite des beinhaltenden Elements
|
Methoden
Methode | |
---|---|
draw(data, options) |
Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis Return Type: Kein
|
getAction(actionID) |
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten Rückgabetyp: Objekt
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getChartAreaBoundingBox() |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagramminhalts enthält (ohne Labels und Legende):
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getChartLayoutInterface() |
Gibt ein Objekt mit Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm zurück. Die folgenden Methoden können für das zurückgegebene Objekt aufgerufen werden:
Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getHAxisValue(xPosition, optional_axis_index) |
Gibt den horizontalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getImageURI() |
Gibt das Diagramm serialisiert als Bild-URI zurück. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Weitere Informationen finden Sie unter PNG-Diagramme drucken. Rückgabetyp: String
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp:Array von Auswahlelementen
|
getVAxisValue(yPosition, optional_axis_index) |
Gibt den vertikalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getXLocation(dataValue, optional_axis_index) |
Gibt die X-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getYLocation(dataValue, optional_axis_index) |
Gibt die Y-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
removeAction(actionID) |
Entfernt die Kurzinfo-Aktion mit dem angeforderten Rückgabetyp:
none |
setAction(action) |
Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.
Die Methode
Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der Rückgabetyp:
none |
setSelection() |
Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verarbeiten und Auslösen von Ereignissen.
Name | |
---|---|
animationfinish |
Wird ausgelöst, wenn die Übergangsanimation abgeschlossen ist. Properties:keine
|
click |
Wird ausgelöst, wenn der Nutzer auf das Diagramm klickt Damit können Sie feststellen, wann auf Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird. Eigenschaften: targetID
|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. Properties (Eigenschaften): id, message, message
|
legendpagination |
Wird ausgelöst, wenn der Nutzer auf Pfeile zum Seitenumbruch für die Legende klickt. Gibt den nullbasierten Seitenindex der aktuellen Legende und die Gesamtzahl der Seiten zurück. Eigenschaften: currentPageIndex, totalPages
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine visuelle Entität bewegt. Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag zu einer Spalte (Zeilenindex ist null) und eine Kategorie zu einer Zeile (Spaltenindex ist null). Eigenschaften: Zeile, Spalte
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger von einer visuellen Entität entfernt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag zu einer Spalte (Zeilenindex ist null) und eine Kategorie zu einer Zeile (Spaltenindex ist null). Eigenschaften: Zeile, Spalte
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Properties:keine
|
select |
Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.