Visualisierung: Bewegungsdiagramm

  1. Overview
  2. Beispiel
  3. Loading
  4. Anfangszustand festlegen
  5. Datenformat
  6. Konfigurationsoptionen
  7. Methoden
  8. Ereignisse
  9. Datenrichtlinie
  10. Notes

Übersicht

Ein dynamisches Diagramm zur Untersuchung mehrerer Indikatoren im Zeitverlauf. Das Diagramm wird im Browser mithilfe von Flash gerendert.

Hinweis für Entwickler: Aufgrund der Flash-Sicherheitseinstellungen funktionieren diese Methode (und alle Flash-basierten Visualisierungen) möglicherweise nicht richtig, wenn der Zugriff von einem Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) statt von einer Webserver-URL (z.B. http://www.myhost.com/myviz.html) aus erfolgt. Dies ist normalerweise nur ein Testproblem. Du kannst dieses Problem wie auf der Adobe-Website beschrieben beheben.

Beispiel

Der folgende Code funktioniert nicht, wenn er als lokale Datei geladen wird. Er muss von einem Webserver geladen werden.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Wird geladen

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

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

Der Klassenname der Visualisierung lautet google.visualization.MotionChart.

  var visualization = new google.visualization.MotionChart(container);

Datenformat

  • Die erste Spalte muss vom Typ „string“ sein und die Entitätsnamen enthalten (z.B. „Äpfel“, „Orangen“, „Bananen“ im obigen Beispiel).
  • Die zweite Spalte muss Zeitwerte enthalten. Die Zeit kann in einem der folgenden Formate ausgedrückt werden:
    • Jahr – Spaltentyp: "number". Beispiel: 2008.
    • Monat, Tag und Jahr – Spaltentyp: 'Datum'; Werte sollten JavaScript-Date-Instanzen sein.
    • Wochennummer – Spaltentyp: „string“. Für die Werte muss das Muster „JJJJWww“ verwendet werden, das ISO 8601 entspricht. Beispiel: „2008W03“.
    • Quartal: Spaltentyp: "string". Die Werte sollten das Muster YYYYQq haben, das ISO 8601 entspricht. Beispiel: „2008Q3“.
  • Die nachfolgenden Spalten können den Typ „number“ (Zahl) oder „string“ (String) haben. Zahlenspalten werden in den Drop-down-Menüs für X-, Y-, Farbe- und Größe-Achsen angezeigt. Stringspalten werden nur im Drop-down-Menü für Farbe angezeigt. Siehe das Beispiel oben.

Anfangszustand festlegen

Sie können festlegen, dass das Bewegungsdiagramm mit einem bestimmten Status beginnt, also mit einem Satz ausgewählter Entitäten und Ansichtenanpassungen. Dazu müssen Sie zuerst das Diagramm erstellen und anzeigen lassen und dann alle Statusänderungen vornehmen, die im Diagramm angezeigt werden sollen (Werte auswählen, Einstellungen ändern usw.), diese Einstellungen dann als String exportieren und diesen String schließlich in Ihrem Code verwenden, indem Sie ihn der Option „Status“ zuweisen. In den nächsten beiden Abschnitten wird beschrieben, wie der Bundesstaatcode exportiert und anschließend verwendet wird.

  1. Öffnen Sie ein funktionierendes Diagramm und legen Sie die Einstellungen fest, die erfasst werden sollen. Sie können unter anderem folgende Einstellungen festlegen: Deckkraft, Zoom und die Skala im Vergleich zur linearen oder linearen Skalierung.
  2. Öffnen Sie die Einstellungen, indem Sie unten rechts im Diagramm auf das Schraubenschlüsselsymbol klicken.
  3. Klicken Sie links unten auf den Link Erweitert, um das Steuerfeld Erweitert zu den Gruppen hinzuzufügen.
  4. Maximieren Sie den Bereich Erweitert und kopieren Sie den Inhalt des Textfelds Status in die Zwischenablage. Hinweis: Anstatt das in den Schritten 2–4 beschriebene Menü zu verwenden, können Sie auf Ihrer Seite eine Schaltfläche einfügen, die getState() aufruft und den aktuellen Status in einem Nachrichtenfeld anzeigt.
  5. Weisen Sie den im vorherigen Schritt kopierten String für den Status dem Optionsparameter „state“ in Ihrem Code zu, wie hier gezeigt. Bei Übergabe an die Methode draw() wird das Diagramm mit dem beim Start angegebenen Status initialisiert.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Konfigurationsoptionen

Name Typ Standard Beschreibung
height number 300 Höhe des Diagramms in Pixeln.
width number 500 Breite des Diagramms in Pixeln.
state String Keine Anfänglicher Anzeigestatus des Diagramms. Dies ist ein serialisiertes JSON-Objekt, das die Zoomstufe, ausgewählte Dimensionen, ausgewählte Blasen/Entitäten und andere Statusbeschreibungen beschreibt. Weitere Informationen dazu, wie Sie diesen festlegen, finden Sie unter Anfangszustand festlegen.
showChartButtons boolean true false blendet die Schaltflächen zur Steuerung des Diagrammtyps (Blasen / Linien / Spalten) oben rechts aus.
showHeader boolean true false blendet die Titelbezeichnung der Entitäten aus (abgeleitet von der Bezeichnung der ersten Spalte in der Datentabelle).
showSelectListComponent boolean true false blendet die Liste der sichtbaren Entitäten aus.
showSidePanel boolean true false blendet das rechte Steuerfeld aus.
showXMetricPicker boolean true false blendet die Messwertauswahl für x aus.
showYMetricPicker boolean true false blendet die Messwertauswahl für „y“ aus.
showXScalePicker boolean true false blendet die Skalierungsauswahl für x aus.
showYScalePicker boolean true false blendet die Skalierungsauswahl für y aus.
showAdvancedPanel boolean true false deaktiviert das Optionsfach im Einstellungssteuerfeld.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm mit den bereitgestellten Optionen.
getState() String Gibt den aktuellen state des Bewegungsdiagramms serialisiert in einen JSON-String zurück. Wenn Sie dem Diagramm diesen Status zuweisen möchten, weisen Sie diesen String der Option state in der Methode draw() zu. Dies wird häufig verwendet, um beim Start einen benutzerdefinierten Diagrammstatus anzugeben, statt den Standardstatus zu verwenden.

Ereignisse

Name Beschreibung Attribute
error Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. ID, Nachricht
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 vor dem Aufrufen der Zeichenmethode einen Listener für dieses Ereignis einrichten. Dieser Listener sollte erst nach dem Auslösen des Ereignisses aufgerufen werden. Ohne
Statechange Der Nutzer hat mit dem Diagramm interagiert. Rufen Sie getState() auf, um den aktuellen Status des Diagramms zu erfahren. Ohne

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 diese Methode (und alle Flash-basierten Visualisierungen) möglicherweise nicht ordnungsgemäß, wenn sie von einem Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) statt über eine Webserver-URL (z.B. http://www.myhost.com/myviz.html) aufgerufen werden. Dies ist in der Regel nur ein Testproblem. Du kannst dieses Problem wie auf der Macromedia-Website beschrieben beheben.