Anmerkungsdiagramm

Übersicht

Anmerkungsdiagramme sind interaktive Zeitachsendiagramme, die Annotationen unterstützen. Für die annotierte Zeitachse wird jetzt automatisch das Anmerkungsdiagramm verwendet.

Benachrichtigung bei Verwirrung:Derzeit unterscheidet sich das Google-Anmerkungsdiagramm von den Anmerkungen, die von anderen Google-Diagrammen (derzeit Fläche, Balken, Spalte, Kombination, Linie und Streuung) unterstützt werden. In diesen Diagrammen werden die Annotationen in einer separaten Datentabellesspalte angegeben und als kurze Textabschnitte angezeigt, in die Nutzer den Mauszeiger bewegen können, um den vollständigen Anmerkungstext zu sehen. Im Anmerkungsdiagramm werden dagegen die vollständigen Annotationen auf der rechten Seite 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 von 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

Sie können im Diagramm eine oder mehrere Linien einblenden. Jede Zeile steht für eine X-Position im Diagramm, d. h. für eine bestimmte Zeit. Jede Zeile wird durch eine Gruppe 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 ist (und nicht datetime), 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:
    • Y-Wert: [erforderlich, Zahl] Die erste Spalte in jedem Satz beschreibt den Wert der Zeile zum jeweiligen Zeitpunkt aus der ersten Spalte. Das Spaltenlabel wird im Diagramm als Titel der entsprechenden Zeile angezeigt.
    • Anmerkungstitel – [optional, String] Wenn eine Wertspalte auf die Wertspalte folgt und die Option displayAnnotations wahr ist, enthält diese Spalte einen kurzen Titel, der diesen Punkt beschreibt. Wenn diese Linie beispielsweise die Temperatur in Brasilien darstellt und dieser Punkt eine sehr hohe Zahl ist, könnte der Titel „Heißer Tag des Aufzeichnungens“ lauten.
    • Anmerkungstext – [optionaler String] Wenn für diese Reihe eine zweite Stringspalte vorhanden ist, wird der Zellenwert als zusätzlicher beschreibender Text 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 festlegen. Es gibt im Grunde keine Größenbeschränkung. Beachten Sie jedoch, dass übermäßig lange Einträge überlaufen können. Diese Spalte muss nicht vorhanden sein, auch wenn Sie für diesen Punkt eine Annotationstitelspalte haben. Das Spaltenlabel wird im Diagramm nicht verwendet. Wenn dies beispielsweise der heißeste Tag am Tag war, könnten Sie beispielsweise „Der nächste Tag war um 10 Grad kühler“ sagen.

Konfigurationsoptionen

Name
allowHTML

Ist die Richtlinie auf „true“ gesetzt, werden alle Anmerkungen, die HTML-Tags enthalten, als HTML gerendert.

Typ: Boolesch
Standard: false
allValuesSuffix

Ein Suffix, das allen Werten in der Legende und den Häkchen in den vertikalen Achsen hinzugefügt werden soll.

Typ: String
Standard: keine
AnmerkungenBreite

Die Breite (in Prozent) des Anmerkungsbereichs, bezogen auf den gesamten Diagrammbereich. Muss eine Zahl zwischen 5 und 80 sein.

Typ: Zahl
Standard: 25
Farben

Die für die Linien und Labels des Diagramms zu verwendenden Farben. Ein String-Array. Jedes Element ist ein String in einem gültigen HTML-Farbformat. Beispiel: „red“ oder „#00cc00“.

Typ:Stringarray
Standard:Standardfarben
Datumsformat

Das Format, mit dem die Datumsinformationen oben rechts angezeigt werden. Das Format dieses Feldes wird gemäß der Klasse java SimpleDateFormat angegeben.

Typ: String
Standard: je nach Typ der ersten Spalte (Datum bzw. Datum/Uhrzeit).
Anmerkungen anzeigen

Wenn die Richtlinie auf „false“ gesetzt ist, wird die Anmerkungstabelle im Diagramm ausgeblendet und die Annotationen und der AnnotationText sind nicht sichtbar. Die Anmerkungstabelle wird unabhängig von dieser Option auch nicht angezeigt, wenn keine Anmerkungen in Ihren Daten vorhanden sind. Wenn diese Option auf „true“ gesetzt ist, können nach jeder numerischen Spalte zwei optionale Annotationsstringspalten hinzugefügt werden: eine für den Annotationstitel und eine für den Annotationstext.

Typ: Boolesch
Standard: true
Filter für Anmerkungen anzeigen

Wenn der Wert auf „true“ gesetzt ist, wird im Diagramm eine Filtersteuerung zum Filtern von Annotationen angezeigt. Verwenden Sie diese Option, wenn viele Annotationen vorhanden sind.

Typ: Boolesch
Standard: false
displayDateBarSeparator-Element

Gibt an, ob ein kleiner Balken ( | ) zwischen den Reihenwerten und dem Datum in der Legende angezeigt werden soll. Wahr bedeutet „ja“.

Typ: Boolesch
Standard: true
displayExactValues

Gibt an, ob eine verkürzte, gerundete Version der Werte oben im Diagramm angezeigt werden soll, um Platz zu sparen. Falsch bedeutet, dass dies möglich ist. Ist sie auf "false" gesetzt, kann 56123,45 als 56,12k angezeigt werden.

Typ: Boolesch
Standard: false
DisplayLegendDots

Gibt an, ob Punkte neben den Werten im Legendentext angezeigt werden sollen, wobei „true“ für „Ja“ steht.

Typ: Boolesch
Standard: true
displayLegendValues

Gibt an, ob die markierten Werte in der Legende angezeigt werden sollen, wobei „true“ für „Ja“ steht.

Typ: Boolesch
Standard: true
displayRangeSelector

Gibt an, ob der Auswahlbereich für den Zoombereich (der Bereich unten im Diagramm) angezeigt werden soll, wobei "false" für "Nein" steht.

Der Umriss in der Zoomauswahl ist eine Logskalierungsversion der ersten Reihe im Diagramm, die an die Höhe der Zoomauswahl angepasst wird.

Typ: Boolesch
Standard: true
displayZoom-Schaltflächen

Gibt an, ob die Zoomschaltflächen wie „1d 5d 1m“ angezeigt werden sollen, wobei „false“ für „Nein“ steht.

Typ: Boolesch
Standard: true
fill

Eine Zahl von 0 bis einschließlich 100, die den Alphawert der Füllung unter jeder Zeile im Liniendiagramm angibt. 100 bedeutet, dass 100% undurchsichtig und 0 bedeutet, dass es überhaupt nicht gefüllt ist. Die Füllfarbe hat dieselbe Farbe wie die Zeile darüber.

Typ: Zahl
Standard: 0
Legende

Gibt an, ob die farbige Legende mit den Zoom-Schaltflächen und dem Datum in derselben Zeile („sameRow“) oder in einer neuen Zeile („newRow“) platziert werden soll.

Typ: String
Standard: „sameRow“
max

Der Höchstwert, 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 das nächste große Häkchen angezeigt wird. Dies hat Vorrang vor dem von scaleType festgelegten Maximum der Y-Achse.

Dies entspricht maxValue in Kerndiagrammen.

Typ: Zahl
Standard: automatisch
Min.

Der Mindestwert, der auf der Y-Achse angezeigt werden soll. Wenn der minimale Datenpunkt unter diesem Wert liegt, wird diese Einstellung ignoriert und das Diagramm wird so angepasst, dass das nächste große Häkchen unter dem minimalen Datenpunkt angezeigt wird. Dies hat Vorrang vor dem Mindestwert von Y-Achse, der durch scaleType bestimmt wird.

Dies entspricht minValue in Kerndiagrammen.

Typ: Zahl
Standard: automatisch
Zahlenformate

Gibt die Zahlenformatmuster an, die zum Formatieren der Werte oben in der Grafik verwendet werden sollen.

Die Muster sollten das Format haben, das in der Java DecimalFormat-Klasse angegeben ist.

  • Wenn nicht angegeben, wird das Standardformatmuster verwendet.
  • Wenn ein einzelnes Stringmuster angegeben ist, wird es für alle Werte verwendet.
  • Wenn eine Zuordnung angegeben ist, sind die Schlüssel (nullbasierte) Indexe der Reihe und die Werte sind die Muster, die zum Formatieren der angegebenen Reihe verwendet werden.

    Sie müssen nicht für jede Reihe im Diagramm ein Format angeben. Für jede nicht spezifizierte 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
scaleSpalten

Gibt an, welche Werte auf der Y-Achse im Diagramm angezeigt werden sollen. Standardmäßig wird auf der rechten Seite eine einzige Skala angezeigt, die für beide Reihen gilt. Sie können aber auch verschiedene Seiten der Grafik auf verschiedene Serienwerte skalieren.

Diese Option verwendet ein Array von null bis drei Zahlen, das den (nullbasierten) Index der Reihe angibt, der als Skalierungswert verwendet werden soll. Wo diese Werte angezeigt werden, hängt davon ab, wie viele Werte Sie in Ihrem Array angeben:

  • Wenn Sie ein leeres Array angeben, werden im Diagramm keine Y-Werte neben den Häkchen angezeigt.
  • Wenn Sie einen Wert angeben, wird der Maßstab der angegebenen Reihe nur auf der rechten Seite des Diagramms angezeigt.
  • Wenn Sie zwei Werte angeben, wird rechts neben dem Diagramm eine Skala für die zweite Reihe 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 Element im Array werden ignoriert.

Wenn Sie mehr als eine Skala anzeigen, wird empfohlen, die Option scaleType entweder auf „allfixed“ oder „allmaximized“ festzulegen.

Typ: Zahlenarray
Standardeinstellung:Automatisch
Skalierungsformat

Zahlenformat, das für die Labels der Achsenmarkierung verwendet werden soll. Der Standardwert von '#' wird als Ganzzahl angezeigt.

Typ: String
Standard: '#'
Skalierungstyp

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

  • „maximiert“: Die Y-Achse reicht von den Mindestwerten bis zu den Maximalwerten der Datenreihe. Wenn Sie mehr als eine Reihe haben, verwenden Sie „maxmaximiert“.
  • „Fest“ [Standard] – Die Y-Achse variiert je nach Datenwertwerten:
    • Wenn alle Werte größer als 0 sind, reicht die Y-Achse von null bis zum maximalen Datenwert.
    • Wenn alle Werte kleiner als 0 sind, reicht die Y-Achse von null bis zum minimalen Datenwert.
    • Wenn die Werte sowohl positiv als auch negativ sind, reicht die Y-Achse vom Reihenmaximalwert bis zum Reihenmindestwert.
      Verwenden Sie für mehrere Reihen „allfixed“.
  • „allemaximiert“: entspricht „maximiert“, wird aber verwendet, wenn mehrere Waagen angezeigt werden Beide Diagramme werden innerhalb derselben Skala maximiert, d. h., eines wird in Bezug auf die Y-Achse falsch dargestellt, aber wenn der Mauszeiger auf eine Reihe bewegt wird, wird der tatsächliche Wert angezeigt.
  • „allefest“ – Wie „fest“, wird aber verwendet, wenn mehrere Waagen angezeigt werden. Mit dieser Einstellung wird jede Skala an die Reihe angepasst, für die sie gilt (in Kombination mit scaleColumns).

Wenn Sie die Optionen für den Mindest- und/oder Höchstwert festlegen, haben diese Vorrang vor den Mindest- und Höchstwerten, die durch Ihren Skalierungstyp bestimmt werden.

Typ: String
Standard: 'fixed'
table

Enthält Optionen zur Annotationstabelle. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteralnotation verwenden:

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
      
Type: Objekt
Standard: null
tabelle.sortAscending

Wenn true festgelegt ist, wird die Reihenfolge der Annotationstabelle umgekehrt und in aufsteigender Reihenfolge angezeigt.

Typ: Boolesch
Standard: false
Tabelle.sortColumn

Spaltenindex der Anmerkungstabelle, nach der die Anmerkungen sortiert werden Der Index muss für die Spalte mit dem Anmerkungslabel entweder 0 oder für die Anmerkungstextspalte 1 sein.

Typ: Zahl
Standard: 0
Randstärke

Eine Zahl von 0 bis einschließlich 10, die die Stärke der Linien angibt, wobei 0 die dünnste ist.

Typ:Zahl
Standard: 0
zoomEndTime (Zoomendezeit)

Legt das Enddatum/die Endzeit des ausgewählten Zoombereichs fest.

Typ: Datum
Standard: keine
zoomStartTime (Startzeit für Zoom)

Legt das Startdatum/die Startzeit des ausgewählten Zoombereichs fest.

Typ: Datum
Standard: keine

Methoden

Methode
clearChart()

Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei.

Rückgabetyp: Keine
draw(data, options, state)

Zeichnet das Diagramm.

Rückgabetyp: Keine
getContainer()

Ruft einen Handle für das Containerelement ab, das das Anmerkungsdiagramm enthält.

Return Type: Rückgabe an ein DOM-Element
getSelection()

Standardimplementierung für getSelection(). 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 Properties start und end zurück. Jedes dieser Attribute ist ein Date-Objekt und stellt die aktuelle Zeitauswahl dar.

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 Array von Zahlen sein kann, wobei 0 auf die erste Datenreihe usw. verweist.

Rückgabetyp: Keine
setVisibleChartRange(start, end)

Legt den sichtbaren Bereich (Zoom) auf den angegebenen Bereich fest. Akzeptiert zwei Parameter vom Typ Date, die die erste und die letzte Male des gewünschten sichtbaren Bereichs darstellen. Setzen Sie start auf null, um alles vom frühesten Datum bis end einzubeziehen. Setzen Sie end auf null, um alles von start bis zum letzten Datum einzuschließen.

Rückgabetyp: Keine
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 Array von Zahlen sein kann, wobei 0 sich auf die erste Datenreihe bezieht usw.

Rückgabetyp: Keine

Ereignisse

Name
rangechange

Wird ausgelöst, wenn der Nutzer den Schieberegler für den Bereich ä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']);
}
Eigenschaften: Anfang, Ende
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde.

Eigenschaften: Keine
select

Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde.

Eigenschaften: Keine

Datenrichtlinie

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.