Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Anmerkungen versehene Zeitachse

Overview
Beispiel
Loading
Datenformat
Konfigurationsoptionen
Methoden
Ereignisse
Datenrichtlinie
Notes

Übersicht

Ein interaktives Zeitreihen-Liniendiagramm mit optionalen Anmerkungen.

In der mit Anmerkungen versehenen Zeitachse werden jetzt stattdessen automatisch Anmerkungsdiagramme verwendet.

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':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

Wichtig : Wenn Sie diese Visualisierung verwenden möchten, müssen Sie die Höhe und Breite des Containerelements explizit auf Ihrer Seite angeben. Beispiel: <div id="chart_div" style="width:400; height:250"></div>.

Wird geladen

Der Paketname „google.charts.load“ lautet „"annotatedtimeline"“

  google.charts.load("current", {packages: ['annotatedtimeline']});

Der Klassenname der Visualisierung lautet google.visualization.AnnotatedTimeLine

  var visualization = new google.visualization.AnnotatedTimeLine(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	Typ	Standard	Beschreibung
allowHtml	boolean	false	Wenn die Richtlinie auf „true“ gesetzt ist, wird jeder Anmerkungstext, der HTML-Tags enthält, als HTML gerendert.
allowRedraw	boolean	false	Aktiviert ein effizienteres Verfahren zum erneuten Zeichnen für den zweiten und späteren `draw()`-Aufruf für diese Visualisierung. Es wird lediglich der Diagrammbereich neu gezeichnet. Für diese Option müssen die folgenden Voraussetzungen erfüllt sein: "allowRedraw" muss "true" sein displayAnnotations muss „false“ sein, d. h. Sie können keine Anmerkungen anzeigen. Sie müssen dieselben Optionen und Werte (mit Ausnahme von „allowRedraw“ und „displayAnnotations“) wie beim ersten Aufruf von `draw()` übergeben.
allValuesSuffix	String	keine	Ein Suffix, das allen Werten der Skalen und der Legende hinzugefügt wird.
annotationsWidth	number	25	Die Breite (in Prozent) des Anmerkungsbereichs aus dem gesamten Diagrammbereich heraus Muss eine Zahl zwischen 5 und 80 sein.
Farben	Stringarray	Standardfarben	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“.
dateFormat	String	Entweder 'MMMM dd, yyyy' oder 'HH:mm MMMM dd, yyyy', je nach Typ der ersten Spalte (date bzw. datetime).	Das Format, in dem die Datumsinformationen oben rechts angezeigt werden. Das Format dieses Feldes entspricht der java SimpleDateFormat-Klasse.
displayAnnotations	boolean	false	Ist die Richtlinie auf „true“ gesetzt, werden im Diagramm Anmerkungen über den ausgewählten Werten angezeigt. 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.
displayAnnotationsFilter	boolean	false	Wenn die Richtlinie auf „true“ gesetzt ist, wird im Diagramm eine Filtersteuerung zum Filtern von Annotationen angezeigt. Verwende diese Option, wenn viele Anmerkungen vorhanden sind.
displayDateBarSeparator	boolean	true	Gibt an, ob zwischen den Reihenwerten und dem Datum in der Legende ein kleines Balkentrennzeichen ( \| ) angezeigt wird, wobei „true“ „Ja“ bedeutet.
displayExactValues	boolean	false	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.
displayLegendDots	boolean	true	Gibt an, ob Punkte neben den Werten im Legendentext angezeigt werden sollen, wobei „wahr“ „Ja“ bedeutet.
displayLegendValues	boolean	true	Gibt an, ob die markierten Werte in der Legende angezeigt werden sollen, wobei „wahr“ „Ja“ bedeutet.
displayRangeSelector	boolean	true	Gibt an, ob der Bereich zur Auswahl des Zoombereichs (der Bereich unten im Diagramm) angezeigt werden soll, wobei „false“ bedeutet, dass er „Nein“ ist. Der Umriss im Zoom-Selektor ist eine Version mit logarithmischer Skala der letzten Reihe im Diagramm, die an die Höhe des Zoom-Selektors angepasst wird.
displayZoomButtons	boolean	true	Gibt an, ob die Zoom-Links angezeigt werden sollen ("1d 5d 1m" usw.), wobei "false" für "nein" steht.
fill	number	0	Eine Zahl von 0–100 (einschließlich), die den Alphawert der Füllung unter jeder Linie im Liniendiagramm angibt. 100 bedeutet 100% undurchsichtige Füllung, 0 bedeutet, dass keine Füllung vorhanden ist. Die Füllfarbe entspricht der Farbe der Linie darüber.
highlightDot	String	'nearest'	Welcher Punkt in der Reihe hervorgehoben werden soll und welche Werte in der Legende angezeigt werden sollen. Wählen Sie einen der folgenden Werte aus: 'nächst' - die Werte, die der X-Achse am nächsten zur Maus liegen. "last" - Die nächste Gruppe von Werten links von der Maus.
legendPosition	String	„sameRow“	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.
Max.	number	automatisch	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 das nächste große Teilstrich oberhalb des maximalen Datenpunkts angezeigt wird. Dies hat Vorrang vor dem durch `scaleType` festgelegten Maximalwert auf der Y-Achse.
Min.	number	automatisch	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.
numberFormats	String oder eine Zuordnung von number:String-Paaren	automatisch	Gibt die Zahlenformatmuster an, die zum Formatieren der Werte oben in der Grafik verwendet werden sollen. Die Muster müssen in dem Format vorliegen, das in der Java DecimalFormat-Klasse angegeben ist. 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 nicht angegebene Reihen wird das Standardformat verwendet. Wenn diese Option angegeben ist, wird die Option `displayExactValues` ignoriert.
scaleColumns	Array von Zahlen	Automatisch	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. Diese Option verwendet ein Array von null bis drei Zahlen, das den (nullbasierten) Index der Reihe angibt, 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 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 Wert im Array werden ignoriert. Wenn mehr als eine Skala angezeigt wird, ist es empfehlenswert, die Option `scaleType` auf „allfixed“ oder „allmaximized“ festzulegen.
scaleType	String	'fixiert'	Legt die auf der Y-Achse angezeigten Maximal- und Minimalwerte fest. Folgende Optionen sind verfügbar: „maximized“ (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 „allmaximiert“. „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 „maximized“ (maximiert), wird aber verwendet, wenn mehrere Skalen angezeigt werden. Beide Diagramme werden innerhalb derselben Skala maximiert, d. h. eines der Diagramme wird anhand der Y-Achse falsch dargestellt. 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 Optionen „Min.“ und/oder „Maximum“ angeben, haben diese Vorrang vor den Mindest- und Höchstwerten, die durch Ihren Skalierungstyp festgelegt werden.
Randstärke	number	0	Eine Zahl von 0–10 (einschließlich), die die Linienstärke angibt, wobei 0 die dünnste ist.
Wmode	String	'Fenster'	Der Parameter Fenstermodus (wmode) für das Flash-Diagramm Verfügbare Werte sind: „opaque“, „window“ oder „transparent“.
zoomEndTime	Datum	keine	Legt das Enddatum und die Endzeit des ausgewählten Zoombereichs fest.
zoomStartTime	Datum	keine	Legt das Startdatum und die Startzeit des ausgewählten Zoombereichs fest.

Methoden

Methode	Rückgabetyp	Beschreibung
`draw(data, options)`	keine	Zeichnet das Diagramm. Mit dem Attribut „allowRedraw“ können Sie die Antwortzeit für den zweiten und spätere `draw()`-Aufruf beschleunigen.
`getSelection()`	Array von Auswahlelementen	Standardmäßige `getSelection()`-Implementierung. Ausgewählte Elemente sind Zellenelemente. Der Nutzer kann jeweils nur eine Zelle auswählen.
`getVisibleChartRange()`	Ein Objekt mit den Attributen `start` und `end`	Gibt ein Objekt mit den Eigenschaften `start` und `end` zurück, wobei jedes Objekt ein `Date`-Objekt ist, das die aktuelle Zeitauswahl darstellt.
`hideDataColumns(columnIndexes)`	keine	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.
`setVisibleChartRange(start, end)`	keine	Legt den sichtbaren Bereich (Zoom) auf den angegebenen Bereich fest. Akzeptiert zwei Parameter des Typs `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.
`showDataColumns(columnIndexes)`	keine	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.

Ereignisse

Name	Beschreibung	Attribute
Bereichsänderung	Der Zoombereich wurde geändert. Wird ausgelöst, nachdem der Nutzer den sichtbaren Zeitraum geändert hat, aber nicht nach einem Aufruf der Methode `setVisibleChartRange`. Hinweis: Es wird empfohlen, die Ereigniseigenschaften nicht zu verwenden, sondern sie durch Aufrufen der Methode `getVisibleChartRange` abzurufen.	`start`: Datum. Die Startzeit des Zoombereichs. `end`: Datum. Die Endzeit des Zoombereichs.
bereit	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 erfolgt erst nach dem Auslösen des Ereignisses.	Ohne
auswählen	Wenn der Nutzer auf ein Anmerkungs-Flag (Markierung) klickt, wird die entsprechende Zelle in der Datentabelle ausgewählt. Die Visualisierung löst dann dieses Ereignis aus.	Ohne

Hinweis: Aufgrund bestimmter Einschränkungen werden Ereignisse möglicherweise nicht ausgelöst, wenn Sie in Ihrem Browser als Datei (z.B. „file://“) und nicht von einem Server (z.B. "http://www").

Datenrichtlinie

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

Hinweise

Aufgrund der Flash-Sicherheitseinstellungen funktionieren dies (und alle Flash-basierten Visualisierungen) möglicherweise nicht ordnungsgemäß, wenn der Zugriff über einen Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) statt über eine Webserver-URL (z.B. http://www.myhost.com/myviz.html) erfolgt. Dies ist in der Regel nur ein Testproblem. Sie können dieses Problem wie auf der Macromedia-Website beschrieben beheben.