Übersicht
Anmerkungsdiagramme sind interaktive Zeitreihen-Liniendiagramme, die Anmerkungen unterstützen. In der annotierten Zeitachse wird jetzt automatisch das Anmerkungsdiagramm verwendet.
Hinweis zur Verwirrung:Derzeit unterscheidet sich das Google-Anmerkungsdiagramm von den Anmerkungen, die andere Google-Diagramme (derzeit Flächen-, Balken-, Säulen-, Kombinations-, Linien- und Streudiagramme) unterstützen. In diesen Diagrammen werden die Annotationen in einer separaten Datentabellenspalte angegeben und als kurze Textabschnitte angezeigt, über die Nutzer den Mauszeiger bewegen können, um den vollständigen Annotationstext zu sehen. Im Gegensatz dazu werden im Anmerkungsdiagramm auf der rechten Seite die vollständigen Annotationen angezeigt, wie unten dargestellt.
Beispiel
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type='text/javascript'> google.charts.load('current', {'packages':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
Wird geladen
Der Paketname „google.charts.load
“ lautet "annotationchart"
.
google.charts.load("current", {packages: ['annotationchart']});
Der Klassenname der Visualisierung lautet google.visualization.AnnotationChart
.
var visualization = new google.visualization.AnnotationChart(container);
Datenformat
In Ihrem Diagramm können Sie eine oder mehrere Linien einblenden. Jede Zeile steht für eine X-Position im Diagramm, also für eine bestimmte Zeit. Jede Zeile wird durch einen Satz von ein bis drei Spalten beschrieben.
- Die erste Spalte hat den Typ
date
oderdatetime
und gibt den X-Wert des Punkts im Diagramm an. Wenn diese Spalte vom Typdate
(und nichtdatetime
) ist, ist die kleinste Zeitauflösung auf der X-Achse ein Tag. - Jede Datenzeile wird dann durch eine Reihe von ein bis drei zusätzlichen Spalten beschrieben, wie hier beschrieben:
- Y-Wert: [Erforderlich, Zahl] Die erste Spalte in jedem Satz enthält den Wert der Zeile zum entsprechenden Zeitpunkt aus der ersten Spalte. Die Spaltenbeschriftung wird im Diagramm als Titel der Linie angezeigt.
- Annotationstitel – [Optional, String] Wenn eine Stringspalte auf die Wertspalte folgt und die Option
displayAnnotations
auf „true“ gesetzt ist, enthält diese Spalte einen kurzen Titel, der diesen Punkt beschreibt. Wenn diese Linie beispielsweise die Temperatur in Brasilien repräsentiert und dieser Punkt eine sehr hohe Zahl ist, könnte der Titel „Brandneuster Tag aller Zeiten“ lauten. - Anmerkungstext: [Optionaler String] Wenn für diese Reihe eine zweite Stringspalte vorhanden ist, wird der Zellenwert als zusätzlicher Beschreibungstext für diesen Punkt verwendet. Sie müssen die Option
displayAnnotations
auf „true“ setzen, um diese Spalte zu verwenden. Sie können HTML-Tags verwenden, wenn SieallowHtml
auftrue
setzen. Im Wesentlichen gibt es keine Größenbeschränkung, aber zu lange Einträge können den Darstellungsbereich überlaufen. Diese Spalte ist auch dann nicht erforderlich, wenn Sie für diesen Punkt eine Anmerkungstitelspalte haben. Die Spaltenbeschriftung wird im Diagramm nicht verwendet. Wenn dies beispielsweise der heißeste Tag an diesem Punkt ist, könntest du etwas wie „Der nächste Tag war 10 Grad kälter!“ sagen.
Konfigurationsoptionen
Name | |
---|---|
allowHtml |
Wenn dieser Wert auf „true“ gesetzt ist, wird jeder Anmerkungstext, der HTML-Tags enthält, als HTML gerendert. Typ: Boolesch
Standard: false
|
allValuesSuffix |
Ein Suffix, das allen Werten in der Legende und den Teilstrichbeschriftungen in den vertikalen Achsen hinzugefügt wird. Typ: String
Standard: keine
|
annotationsWidth |
Die Breite (in Prozent) des Anmerkungsbereichs aus dem gesamten Diagrammbereich heraus Muss eine Zahl im Bereich von 5 bis 80 sein. Typ:Zahl
Standard: 25
|
Farben |
Die Farben, die für die Linien und Beschriftungen des Diagramms verwendet werden sollen. Ein Array von Strings. Jedes Element ist ein String in einem gültigen HTML-Farbformat. Beispiel: „rot“ oder „#00cc00“. Typ:String-Array
Standard:Standardfarben
|
dateFormat |
Das Format, in dem die Datumsinformationen oben rechts angezeigt werden. Das Format dieses Feldes entspricht der Java SimpleDateFormat-Klasse. Typ: String
Standard:
Entweder "MMMM dd, yyyy" oder "HH:mm MMMM dd, yyyy", je nach Typ der ersten Spalte (date bzw. datetime).
|
displayAnnotations |
Wenn die Richtlinie auf „false“ gesetzt ist, blendet das Diagramm die Anmerkungstabelle aus. Die Annotationen und AnnotationText sind nicht sichtbar. Unabhängig von dieser Option wird die Annotationstabelle auch nicht angezeigt, wenn Ihre Daten keine Annotationen enthalten. Wenn diese Option auf „true“ gesetzt ist, können nach jeder numerischen Spalte zwei optionale Anmerkungsstring-Spalten hinzugefügt werden: eine für den Anmerkungstitel und eine für den Anmerkungstext. Typ: Boolesch
Standardeinstellung:true
|
displayAnnotationsFilter |
Ist sie auf „true“ gesetzt, wird im Diagramm eine Filtersteuerung zum Filtern von Annotationen angezeigt. Verwenden Sie diese Option, wenn viele Annotationen vorhanden sind. Typ: Boolesch
Standard: false
|
displayDateBarSeparator |
Gibt an, ob zwischen den Reihenwerten und dem Datum in der Legende ein kleines Balkentrennzeichen ( | ) angezeigt wird, wobei „true“ „Ja“ bedeutet. Typ: Boolesch
Standardeinstellung:true
|
displayExactValues |
Gibt an, ob eine gekürzte, gerundete Version der Werte oben im Diagramm angezeigt werden soll, um Platz zu sparen; „false“ bedeutet, dass dies möglich ist. Wenn Sie beispielsweise auf „false“ gesetzt ist, wird 56123.45 möglicherweise als „56,12k“ angezeigt. Typ: Boolesch
Standard: false
|
displayLegendDots |
Gibt an, ob Punkte neben den Werten im Legendentext angezeigt werden sollen, wobei „wahr“ „Ja“ bedeutet. Typ: Boolesch
Standardeinstellung:true
|
displayLegendValues |
Gibt an, ob die markierten Werte in der Legende angezeigt werden sollen, wobei „wahr“ „Ja“ bedeutet. Typ: Boolesch
Standardeinstellung:true
|
displayRangeSelector |
Gibt an, ob der Bereich zur Auswahl des Zoombereichs (der Bereich unten im Diagramm) angezeigt werden soll. „false“ bedeutet „nein“. Der Umriss in der Zoomauswahl ist eine Version mit logarithmischer Skala der ersten Reihe im Diagramm, die an die Höhe der Zoomauswahl angepasst wird. Typ: Boolesch
Standardeinstellung:true
|
displayZoomButtons |
Gibt an, ob die Zoom-Schaltflächen angezeigt werden sollen ("1d 5d 1m" usw.), wobei "false" für "nein" bedeutet. Typ: Boolesch
Standardeinstellung:true
|
fill |
Eine Zahl von 0–100 (einschließlich), die den Alphawert der Füllung unter jeder Linie im Liniendiagramm angibt. 100 bedeutet 100% Deckkraft, 0 bedeutet, dass keine Füllung vorhanden ist. Die Füllfarbe entspricht der Farbe der Linie darüber. Typ:Zahl
Standard: 0
|
legendPosition |
Gibt an, ob die farbige Legende mit den Zoomschaltflächen und dem Datum in derselben Zeile („sameRow“) oder in einer neuen Zeile („newRow“) platziert werden soll. Typ: String
Standard: 'sameRow'
|
Max. |
Der Maximalwert, der auf der Y-Achse angezeigt werden soll. Wenn der maximale Datenpunkt diesen Wert überschreitet, wird diese Einstellung ignoriert und das Diagramm wird so angepasst, dass der nächste große Teilstrich oberhalb des maximalen Datenpunkts angezeigt wird. Dies hat Vorrang vor dem durch Das entspricht in etwa Typ:Zahl
Standard:automatisch
|
Min. |
Der Minimalwert, der auf der Y-Achse angezeigt werden soll. Wenn der Mindestdatenpunkt kleiner als dieser Wert ist, wird diese Einstellung ignoriert und das Diagramm wird so angepasst, dass das nächste große Teilstrich unterhalb des Mindestdatenpunkts angezeigt wird. Dies hat Vorrang vor dem durch Das entspricht in etwa Typ:Zahl
Standard:automatisch
|
numberFormats |
Gibt die Zahlenformatmuster an, die zum Formatieren der Werte am oberen Rand der Grafik verwendet werden sollen. Die Muster sollten in dem Format vorliegen, das in der Java DecimalFormat-Klasse.
Wenn diese Option angegeben ist, wird die Option Typ:String oder eine Zuordnung von number:String-Paaren
Standard:automatisch
|
scaleColumns |
Gibt an, welche Werte auf den Teilstrichen der Y-Achse im Diagramm angezeigt werden sollen. Standardmäßig ist auf der rechten Seite eine einzige Skala vorhanden, die für beide Reihen gilt. Sie können jedoch verschiedene Seiten des Diagramms für unterschiedliche Reihenwerte skalieren lassen. Diese Option verwendet ein Array von null bis drei Zahlen, mit dem der (nullbasierte) Index der Reihe angegeben wird, die als Skalierungswert verwendet werden soll. Wo diese Werte angezeigt werden, hängt davon ab, wie viele Werte Sie in das Array aufnehmen:
Wenn mehr als eine Skala angezeigt wird, ist es empfehlenswert, die Option Typ:Array von Zahlen
Standard:Automatisch
|
scaleFormat |
Zahlenformat, das für die Beschriftungen der Teilstriche der Achse verwendet werden soll. Der Standardwert Typ: String
Standard: #
|
scaleType |
Legt die auf der Y-Achse angezeigten Maximal- und Minimalwerte fest. Folgende Optionen sind verfügbar:
Wenn Sie die Mindest- und/oder Höchstwerte angeben, haben diese Vorrang vor den Mindest- und Höchstwerten, die durch Ihren Skalierungstyp festgelegt werden. Typ: String
Standard: „fest“
|
table |
Enthält Optionen für die Annotationstabelle. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden: var options: { table: { sortAscending: true, sortColumn: 1 } }; Typ:Objekt
Standard:null
|
table.sortAscending |
Wenn der Wert auf Typ: Boolesch
Standard: false
|
table.sortColumn |
Der Spaltenindex der Annotationstabelle, nach der die Annotationen sortiert werden. Der Index muss entweder 0 (für die Anmerkungslabelspalte) oder 1 (für die Anmerkungstextspalte) sein. Typ:Zahl
Standard: 0
|
Randstärke |
Eine Zahl von 0–10 (einschließlich), die die Linienstärke angibt, wobei 0 die dünnste ist. Typ:Zahl
Standard: 0
|
zoomEndTime |
Legt das Enddatum und die Endzeit des ausgewählten Zoombereichs fest. Typ:Datum
Standard: keine
|
zoomStartTime |
Legt das Startdatum und die Startzeit des ausgewählten Zoombereichs fest. Typ:Datum
Standard: keine
|
Methoden
Methode | |
---|---|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
draw(data, options, state) |
Zeichnet das Diagramm. Return Type: Kein
|
getContainer() |
Ruft einen Handle für das Containerelement ab, das das Anmerkungsdiagramm enthält. Rückgabetyp:Handle eines DOM-Elements
|
getSelection() |
Standardmäßige Rückgabetyp:Array von Auswahlelementen
|
getVisibleChartRange() |
Gibt ein Objekt mit den Eigenschaften
Rückgabetyp:Ein Objekt mit den Attributen
start und end .
|
hideDataColumns(columnIndexes) |
Blendet die angegebene Datenreihe aus dem Diagramm aus. Akzeptiert einen Parameter, der eine Zahl oder ein Zahlenarray sein kann, in dem sich 0 auf die erste Datenreihe bezieht usw. Return Type: Kein
|
setVisibleChartRange(start, end) |
Legt den sichtbaren Bereich (Zoom) auf den angegebenen Bereich fest. Akzeptiert zwei Parameter vom Typ Return Type: Kein
|
showDataColumns(columnIndexes) |
Zeigt die angegebenen Datenreihen aus dem Diagramm an, nachdem sie mit der Methode Return Type: Kein
|
Ereignisse
Name | |
---|---|
rangechange |
Wird ausgelöst, wenn der Nutzer den Bereichsschieberegler ändert. Die neuen Bereichsendpunkte sind als google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } Attribute:start, end
|
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.