Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Anmerkungen versehene Zeitachse

Übersicht
Beispiel
Loading
Datenformat
Konfigurationsoptionen
Methoden
Ereignisse
Datenrichtlinie
Hinweise

Übersicht

Interaktives Liniendiagramm mit optionalen Anmerkungen.

Für die annotierte Zeitachse werden jetzt automatisch Annotationsdiagramme 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 von 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

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	Typ	Standard	Beschreibung
allowHTML	boolean	false	Wenn die Richtlinie auf „true“ gesetzt ist, werden alle Anmerkungen, die HTML-Tags enthalten, als HTML gerendert.
allowRedraw	boolean	false	Aktiviert ein effizienteres Neuzeichnungsverfahren für den zweiten und späteren Aufruf von `draw()` in dieser Visualisierung. Es wird nur der Diagrammbereich neu gezeichnet. Wenn Sie diese Option verwenden möchten, müssen Sie die folgenden Anforderungen erfüllen: allowRedraw muss wahr sein displayAnnotations müssen falsch sein (das heißt, Sie können keine Anmerkungen anzeigen) müssen Sie dieselben Optionen und Werte (mit Ausnahme von allowRedraw und displayAnnotations) wie im ersten Aufruf von `draw()` übergeben.
allValuesSuffix	String	keine	Ein Suffix, das allen Werten in den Skalen und der Legende hinzugefügt werden soll.
AnmerkungenBreite	Zahl	25	Die Breite (in Prozent) des Anmerkungsbereichs, bezogen auf den gesamten Diagrammbereich. Muss eine Zahl zwischen 5 und 80 sein.
Farben	Stringarray	Standardfarben	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“.
Datumsformat	String	Entweder „dd MM, yyyy“ oder „HH:mm dd MMMM yyyy“, je nach Typ der ersten Spalte (Datum bzw. Datum/Uhrzeit).	Das Format, mit dem die Datumsinformationen oben rechts angezeigt werden. Das Format dieses Felds wird gemäß der java SimpleDateFormat-Klasse angegeben.
Anmerkungen anzeigen	boolean	false	Ist die Richtlinie auf „true“ gesetzt, werden im Diagramm Annotationen über den ausgewählten Werten angezeigt. 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.
Filter für Anmerkungen anzeigen	boolean	false	Wenn der Wert auf „true“ gesetzt ist, wird im Diagramm eine Filtersteuerung angezeigt, mit der Annotationen gefiltert werden können. Verwende diese Option, wenn viele Anmerkungen vorhanden sind.
displayDateBarSeparator-Element	boolean	true	Gibt an, ob ein kleiner Balken ( \| ) zwischen den Reihenwerten und dem Datum in der Legende angezeigt werden soll. Wahr bedeutet „ja“.
displayExactValues	boolean	false	Gibt an, ob eine verkürzte, gerundete Version der Werte im oberen Bereich des Diagramms angezeigt werden soll, um Platz zu sparen. Falsch bedeutet, dass dies möglich ist. Wenn Sie beispielsweise "false" festlegen, wird 56123,45 als 56,12k angezeigt.
DisplayLegendDots	boolean	true	Gibt an, ob Punkte neben den Werten im Legendentext angezeigt werden sollen, wobei „true“ für „Ja“ steht.
displayLegendValues	boolean	true	Gibt an, ob die markierten Werte in der Legende angezeigt werden sollen, wobei „true“ für „yes“ steht.
displayRangeSelector	boolean	true	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 letzten Reihe im Diagramm, die an die Höhe der Zoomauswahl angepasst wird.
displayZoom-Schaltflächen	boolean	true	Gibt an, ob die Zoomlinks angezeigt werden sollen (z. B. „1d 5d 1m“, wobei „false“ für „Nein“ steht).
fill	Zahl	0	Eine Zahl von 0 bis einschließlich 100, die den Alphawert der Füllung unter jeder Zeile im Liniendiagramm angibt. 100 bedeutet 100% undurchsichtig, 0 bedeutet überhaupt keine Füllung. Die Füllfarbe hat dieselbe Farbe wie die Zeile darüber.
Punkt markieren	String	"nächste"	Welcher Punkt in der Reihe zu markieren ist und welche Werte in der Legende angezeigt werden Wählen Sie einen der folgenden Werte aus: "nächst": die Werte, die der X-Achse am nächsten an der Maus liegen 'last' [letzte]: Die nächste Gruppe von Werten auf der linken Seite der Maus.
Legende	String	„sameRow“	Gibt an, ob die farbige Legende in derselben Zeile über die Zoom-Schaltflächen und das Datum („sameRow“) oder in einer neuen Zeile („newRow“) platziert werden soll.
max	Zahl	automatisch	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.
Min.	Zahl	automatisch	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 Mindestdatenpunkt angezeigt wird. Dies hat Vorrang vor dem Mindestwert von `scaleType` auf der Y-Achse.
Zahlenformate	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 sollten das Format haben, das in der Klasse java DecimalFormat. 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.
scaleSpalten	Array von Zahlen	Automatisch	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 des Diagramms auf verschiedene Reihenwerte 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.
Skalierungstyp	String	„Fest“	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 Buchreihe haben, verwenden Sie „maximiert“. „Fest“ [Standard] – Die Y-Achse variiert je nach den Werten der Datenwerte: 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“. „maxmaximiert“: 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 Verbindung mit `scaleColumns` verwenden). 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.
Randstärke	Zahl	0	Eine Zahl von 0 bis einschließlich 10, die die Stärke der Linien angibt, wobei 0 die dünnste ist.
Wmode	String	'Fenster' [window]	Der Fenstermodus (Wmode) für das Flash-Diagramm. Verfügbare Werte sind: „opaque“, „window“ und „transparent“.
zoomEndTime (Zoomendezeit)	Datum	keine	Legt das Enddatum/die Endzeit des ausgewählten Zoombereichs fest.
zoomStartTime (Startzeit für Zoom)	Datum	keine	Legt das Startdatum/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äteren Aufruf an `draw()` beschleunigen.
`getSelection()`	Array von Auswahlelementen	Standardimplementierung für `getSelection()`. Ausgewählte Elemente sind Zellenelemente. Der Nutzer kann jeweils nur eine Zelle auswählen.
`getVisibleChartRange()`	Ein Objekt mit den Eigenschaften `start` und `end`	Gibt ein Objekt mit den Properties `start` und `end` zurück. Jedes dieser Attribute ist ein `Date`-Objekt und stellt die aktuelle Zeitauswahl dar.
`hideDataColumns(columnIndexes)`	keine	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 verweist usw.
`setVisibleChartRange(start, end)`	keine	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.
`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 Array von Zahlen sein kann, wobei 0 auf die erste Datenreihe verweist usw.

Ereignisse

Name	Beschreibung	Attribute
Bereichsänderung	Zoombereich wurde geändert. Wird ausgelöst, nachdem der Nutzer den sichtbaren Zeitraum geändert hat, aber nicht nach dem Aufruf der Methode `setVisibleChartRange`. Hinweis: Es wird empfohlen, nicht die Ereignis-Properties zu verwenden, sondern sie stattdessen mit der `getVisibleChartRange`-Methode 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 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.	–
wähle	Wenn der Nutzer auf ein Annotations-Flag (Markierung) klickt, wird die entsprechende Zelle in der Datentabelle ausgewählt. Die Visualisierung löst dann dieses Ereignis aus.	–

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

Datenrichtlinie

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

Hinweise

Aufgrund von Flash-Sicherheitseinstellungen funktionieren diese und alle Flash-basierten Visualisierungen möglicherweise nicht richtig, wenn der Zugriff auf einen Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) und nicht auf eine Webserver-URL (z.B. http://www.myhost.com/myviz.html) erfolgt. Dies ist in der Regel ein Testproblem. Du kannst dieses Problem beheben, wie auf der Macromedia-Website beschrieben.