Visualisierung: Bewegungsdiagramm

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

Übersicht

Ein dynamisches Diagramm, mit dem Sie mehrere Indikatoren im Zeitverlauf untersuchen können. Das Diagramm wird mit Flash im Browser gerendert.

Hinweis für Entwickler: Aufgrund von Flash-Sicherheitseinstellungen funktionieren diese und alle Flash-basierten Visualisierungen möglicherweise nicht richtig, wenn der Zugriff von einer Datei im Browser aus (z.B. file:///c:/webhost/myhost/myviz.html) und nicht von einer Webserver-URL (z.B. http://www.myhost.com/myviz.html) erfolgt. Hierbei handelt es sich in der Regel nur um 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 von 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“, „Bananas“ im Beispiel oben.
  • Die zweite Spalte muss Zeitwerte enthalten. Die Zeit kann in einem der folgenden Formate angegeben werden:
    • Jahr – Spaltentyp: "Zahl". Beispiel: 2008.
    • Monat, Tag und Jahr – Spaltentyp: "date". Die Werte sollten die JavaScript-Instanzen Date sein.
    • Wochennummer: Spaltentyp: „String“; Werte müssen das Muster JJJJWWW haben, das ISO 8601 entspricht. Beispiel: „2008W03“.
    • Quartal – Spaltentyp: "String"; die Werte müssen das Muster JJJJQq haben, das ISO 8601 entspricht. Beispiel: „2008Q3“.
  • Nachfolgende Spalten können den Typ „Zahl“ oder „String“ haben. Die Zahlenspalten werden in den Drop-down-Menüs für die Achsen X, Y, Farbe und Größe angezeigt. Stringspalten werden nur im Drop-down-Menü für „Farbe“ angezeigt. Siehe Beispiel oben.

Anfangszustand festlegen

Sie können festlegen, dass das Bewegungsdiagramm mit einem bestimmten Status beginnt, also mit einer Gruppe ausgewählter Elemente und Anpassungen der Ansicht. Dazu müssen Sie zuerst das Diagramm erstellen und anzeigen, dann alle Statusänderungen vornehmen, die das Diagramm anzeigen soll (Werte auswählen, Einstellungen ändern usw.), diese Einstellungen als String exportieren und diesen String schließlich in Ihrem Code zuweisen und der Option „State“ zuweisen. In den nächsten zwei Abschnitten wird beschrieben, wie Sie den Bundesstaatcode exportieren und dann verwenden.

  1. Öffnen Sie ein funktionierendes Diagramm und legen Sie die Einstellungen fest, die Sie erfassen möchten. Zu den verfügbaren Einstellungen gehören beispielsweise Deckkraft, Zoom und Protokoll- im Vergleich zur linearen Skalierung.
  2. Öffnen Sie den Bereich Einstellungen, indem Sie in der unteren rechten Ecke des Diagramms auf das Schraubenschlüssel-Symbol klicken.
  3. Klicken Sie links unten auf den Link Erweitert, um dem Satz das Feld Erweitert hinzuzufügen.
  4. Maximieren Sie den Bereich Erweitert und kopieren Sie den Inhalt des Textfelds Status in die Zwischenablage. Hinweis: Anstelle des in den Schritten 2–4 beschriebenen Menüs kannst du auf deiner Seite eine Schaltfläche einfügen, die getState() aufruft und den aktuellen Status in einem Nachrichtenfeld anzeigt.
  5. Weisen Sie den Zustandsstring, den Sie im vorherigen Schritt kopiert haben, dem Parameter „State“ in Ihrem Code zu, wie hier gezeigt. Bei Übergabe an die Methode draw() wird das Diagramm auf den beim Start angegebenen Zustand 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 Zahl 300 Höhe des Diagramms in Pixeln.
width Zahl 500 Breite des Diagramms in Pixeln.
Bundesland String – Ein anfänglicher Anzeigestatus für das Diagramm. Dies ist ein serialisiertes JSON-Objekt, das die Zoomstufe, die ausgewählten Dimensionen, die ausgewählten Blasen/Entitäten und andere Zustandsbeschreibungen beschreibt. Informationen zum Festlegen dieses Werts finden Sie unter Anfangszustand festlegen.
Schaltfläche „Diagramm einblenden“ boolean true Mit „false“ werden die Schaltflächen zum Steuern des Diagrammtyps (Blasen / Linien / Spalten) oben rechts ausgeblendet.
Kopfzeile anzeigen boolean true Mit „false“ wird das Titellabel der Elemente ausgeblendet (abgeleitet aus dem Label der ersten Spalte in der Datentabelle).
showSelectListComponent boolean true Mit "false" wird die Liste der sichtbaren Entitäten ausgeblendet.
Seitenleiste anzeigen boolean true Bei „falsch“ wird das rechte Steuerfeld ausgeblendet.
ShowXMetricPicker boolean true Mit „false“ wird die Messwertauswahl für x ausgeblendet.
YMesswert-Picker anzeigen boolean true Mit „false“ wird die Messwertauswahl für y ausgeblendet.
SkalaAuswahl anzeigen boolean true false blendet die Skalierungsauswahl für x aus.
YYPPicker anzeigen boolean true false blendet die Skalierungsauswahl für y aus.
Erweitertes Steuerfeld anzeigen boolean true Mit „false“ wird das Einstellungsfach im Einstellungsbereich deaktiviert.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm mit den angegebenen Optionen.
getState() String Gibt den aktuellen Status des Bewegungsdiagramms zurück, serialisiert in einen JSON-String. Wenn Sie diesen Status dem Diagramm zuweisen möchten, weisen Sie diesen String der Option state in der Methode draw() zu. Damit wird beim Start oft ein benutzerdefinierter Diagrammstatus angegeben, anstatt den Standardstatus zu verwenden.

Ereignisse

Name Beschreibung Attribute
error Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt ID, Nachricht
bereit Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, richten Sie einen Listener für dieses Ereignis ein, bevor Sie die Zeichenmethode aufrufen. Rufen Sie sie erst nach dem Auslösen des Ereignisses auf. –
Statechange Der Nutzer hat mit dem Diagramm interagiert. Rufen Sie getState() auf, um den aktuellen Status des Diagramms zu erfahren. –

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 von einem Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) aus und nicht von einer Webserver-URL (z.B. http://www.myhost.com/myviz.html) zugegriffen wird. Dies ist in der Regel nur ein Testproblem. Du kannst dieses Problem beheben, wie auf der Macromedia-Website beschrieben.