Anmerkungsdiagramm

Ü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 oder datetime und gibt den X-Wert des Punkts im Diagramm an. Wenn diese Spalte vom Typ date (und nicht datetime) 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 Sie allowHtml auf true 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 scaleType festgelegten Maximalwert auf der Y-Achse.

Das entspricht in etwa maxValue in Kerndiagrammen.

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 scaleType festgelegten Minimum auf der Y-Achse.

Das entspricht in etwa minValue in Kerndiagrammen.

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 keine Angabe erfolgt, wird das Standardformatmuster verwendet.
  • Wenn ein einzelnes Zeichenfolgenmuster angegeben ist, wird es für alle Werte verwendet.
  • Wenn eine Zuordnung angegeben ist, sind die Schlüssel (nullbasierte) Indexe von Reihen und die Werte sind die Muster, die zum Formatieren der angegebenen Reihe verwendet werden sollen.

    Sie müssen nicht für jede Reihe im Diagramm ein Format angeben. Für jede nicht angegebene Reihe wird das Standardformat verwendet.

Wenn diese Option angegeben ist, wird die Option displayExactValues ignoriert.

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 Sie ein leeres Array angeben, werden im Diagramm keine Y-Werte neben den Teilstrichen angezeigt.
  • Wenn Sie einen Wert angeben, wird die Skala der angegebenen Reihe nur auf der rechten Seite des Diagramms angezeigt.
  • Wenn Sie zwei Werte angeben, wird die Skala für die zweite Reihe rechts neben dem Diagramm hinzugefügt.
  • Wenn Sie drei Werte angeben, wird in der Mitte des Diagramms eine Skala für die dritte Reihe hinzugefügt.
  • Alle Werte nach dem dritten Wert im Array werden ignoriert.

Wenn mehr als eine Skala angezeigt wird, ist es empfehlenswert, die Option scaleType auf „allfest“ oder „allmaximiert“ festzulegen.

Typ:Array von Zahlen
Standard:Automatisch
scaleFormat

Zahlenformat, das für die Beschriftungen der Teilstriche der Achse verwendet werden soll. Der Standardwert '#' wird als Ganzzahl angezeigt.

Typ: String
Standard: #
scaleType

Legt die auf der Y-Achse angezeigten Maximal- und Minimalwerte fest. Folgende Optionen sind verfügbar:

  • „maximiert“ – Die Y-Achse erstreckt sich von den Mindest- bis zu den Höchstwerten der Reihe. Wenn Sie mehr als eine Reihe haben, verwenden Sie „allmaximisiert“.
  • „fest“ [Standard] – Die Y-Achse variiert je nach Datenwerten:
    • Wenn alle Werte >=0 sind, erstreckt sich die Y-Achse von null bis zum maximalen Datenwert.
    • Wenn alle Werte <=0 sind, erstreckt sich die Y-Achse von null bis zum minimalen Datenwert.
    • Wenn die Werte sowohl positiv als auch negativ sind, reicht die Y-Achse vom Maximalwert bis zum Minimum der Reihe.
      Verwenden Sie für mehrere Reihen „allfixed“.
  • „allmaximized“: Entspricht „maximiert“, wird jedoch verwendet, wenn mehrere Skalen angezeigt werden. Beide Diagramme werden innerhalb derselben Skala maximiert, was bedeutet, dass eines der Diagramme in Bezug auf die Y-Achse falsch dargestellt wird. Wenn Sie jedoch den Mauszeiger auf die einzelnen Reihen bewegen, wird der tatsächliche Wert angezeigt.
  • "allfix": Entspricht "fest", wird jedoch verwendet, wenn mehrere Skalen angezeigt werden. Mit dieser Einstellung wird jede Skala an die jeweilige Reihe angepasst. Verwende diese Einstellung in Verbindung mit scaleColumns.

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 true gesetzt ist, wird die Reihenfolge der Annotationstabelle umgekehrt und in aufsteigender Reihenfolge angezeigt.

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 getSelection()-Implementierung. Ausgewählte Elemente sind Zellenelemente. Der Nutzer kann jeweils nur eine Zelle auswählen.

Rückgabetyp:Array von Auswahlelementen
getVisibleChartRange()

Gibt ein Objekt mit den Eigenschaften start und end zurück, wobei jedes Objekt ein Date-Objekt ist, das die aktuelle Zeitauswahl darstellt.

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 Date, die das erste und letzte Mal des gewünschten ausgewählten sichtbaren Bereichs darstellen. Legen Sie start auf null fest, um alles vom frühesten Datum bis end zu berücksichtigen. Setzen Sie end auf null, um alles vom start bis zum letzten Datum einzuschließen.

Return Type: Kein
showDataColumns(columnIndexes)

Zeigt die angegebenen Datenreihen aus dem Diagramm an, nachdem sie mit der Methode hideDataColumns ausgeblendet wurden. Akzeptiert einen Parameter, der eine Zahl oder ein Zahlenarray sein kann, in dem sich 0 auf die erste Datenreihe bezieht usw.

Return Type: Kein

Ereignisse

Name
rangechange

Wird ausgelöst, wenn der Nutzer den Bereichsschieberegler ändert. Die neuen Bereichsendpunkte sind als event['start'] und event['end'] verfügbar:

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 draw aufrufen. Der Aufruf muss erst erfolgen, nachdem das Ereignis ausgelöst wurde.

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 getSelection() auf.

Properties:keine

Datenrichtlinie

Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.