Visualisierung: allgemeines Bilddiagramm

Wichtig: Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Das Programm funktioniert gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin.

  1. Overview
  2. Beispiele
  3. Loading
  4. Datenformat
  5. Konfigurationsoptionen
  6. Methoden
  7. Ereignisse
  8. Datenrichtlinie
  9. Localization

Übersicht

Das generische Bilddiagramm ist ein generischer Wrapper für alle Diagramme, die mit der Google Chart API erstellt werden. Lesen Sie die Chart API-Dokumentation, bevor Sie diese Visualisierung verwenden. Im Gegensatz zum Limit von 2.000 bei direkten Aufrufen der Chart API können Sie mit dieser Visualisierung bis zu 16.000 Daten senden.

Alle Daten werden mithilfe einer DataTable oder DataView an die Diagramme übergeben. Darüber hinaus werden einige Labels als Spalten in der Datentabelle übergeben.

Alle anderen URL-Parameter der Chart API (außer chd) werden als Optionen übergeben.

Von: Google

Beispiele

Hier sind Beispiele für verschiedene Diagrammtypen.

Liniendiagramm

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Vertikales Balkendiagramm

In den umschlossenen Balkendiagrammen müssen Sie „chxt='x'“ nicht angeben, wie Sie es tun würden, wenn Sie das Diagramm selbst aufrufen. Wenn Sie keine Achse angeben, versucht das allgemeine Bilddiagramm standardmäßig, das Diagramm korrekt einzurichten.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

Kreisdiagramm

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Netzdiagramm

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Kartendiagramm

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

Wird geladen

Der Paketname von google.charts.load lautet „imagechart“.

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

Der Klassenname der Visualisierung lautet google.visualization.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

Datenformat

Es gibt zwei allgemeine Datenformate: eines für Kartendiagramme und eines für alle anderen Diagramme. Das einzige numerische Format, das für Daten unterstützt wird, ist der JavaScript-Zahlentyp.

Hinweis: Stringwerte, die als Daten oder Optionen übergeben werden, sollten nicht URL-codiert werden.

Kartendiagramme

Für ein Kartendiagramm wird eine Datentabelle mit zwei erforderlichen Spalten verwendet:

Weitere Informationen finden Sie in der Dokumentation zu Kartendiagrammen.

Andere Diagramme

Für Diagramme, die keine Karten sind, wird eine Datentabelle mit zwei optionalen Spalten (eine am Anfang, eine am Ende) und einer oder mehreren Datenspalten dazwischen verwendet:

  • Erste Spalte – [optional, String] Jeder Eintrag steht für ein Label, das auf der X-Achse verwendet wird (entspricht dem Parameter chl oder chxl) für Diagramme, die dies unterstützen.
  • Nächste Spalten: Beliebige Anzahl numerischer Spalten, die jeweils eine Datenreihe darstellen.
  • Letzte Spalten: [optional, String] Eine beliebige Anzahl von Stringspalten im Anschluss an die Datenspalten, wobei jeder Eintrag ein Datenpunktlabel für Diagramme darstellt, die dies unterstützen. Wenn Sie diese Spalte verwenden möchten, müssen Sie die Option annotationColumns angeben.

Die Daten werden je nach Diagrammtyp unterschiedlich dargestellt. Weitere Informationen finden Sie in der Dokumentation zu Ihrem Diagramm.

Hinweis zu Spaltenindexen: Bei der Visualisierung des generischen Bilddiagramms werden Stringspalten aus der Datentabelle entfernt, bevor die Tabelle an den Chart API-Dienst gesendet wird. Daher enthalten Spaltenindexe in den auf dieser Seite definierten Optionen, Methoden und Ereignissen die Stringspalten in der Indexanzahl. Spaltenindexe in allen Optionen, die vom Chart API-Dienst verarbeitet werden (z. B. bei der Option chm), ignorieren jedoch die Stringspalten in der Indexanzahl.

Konfigurationsoptionen

Für diese Visualisierung sind die folgenden Optionen definiert. Definieren Sie sie im Optionsobjekt, das an die draw()-Methode der Visualisierung übergeben wird. Nicht alle der folgenden Optionen werden für alle Diagrammtypen unterstützt. Weitere Informationen finden Sie in der Dokumentation zu Ihrem Diagrammtyp mit statischen Bildern. Sie können jeden beliebigen Chart API-URL-Parameter als Option übergeben. Der URL-Parameter chg=50,50 aus einer Diagrammvisualisierung wird beispielsweise so angegeben: options['chg'] = '50,50'.

Hinweis zu Farben: Farboptionen wie colors, color und backgroundColor werden im Farbformat der Chart API angegeben. Dieses Format ähnelt dem #RRGGBB-Format, enthält jedoch eine optionale vierte Hexadezimalzahl, um die Transparenz anzugeben. Für Menschen lesbare Farben wie „Rot“, „Grün“, „Blau“ usw. werden nicht unterstützt. Das Farbformat der Chart API enthält nicht das Symbol „#“. Die allgemeinen Optionen für die Visualisierung von Bilddiagrammen akzeptieren jedoch Farbcodes mit oder ohne #.

Name Typ Standard Beschreibung
annotationColumns Array<object> keine

Datenpunktlabels für verschiedene Diagrammtypen. Dies ist ein Array von Objekten, die jeweils einem Datenpunkt im Diagramm ein formatiertes Label zuweisen. Diese Option ist nur für Diagramme verfügbar, die Datenpunkte unterstützen. Informationen dazu finden Sie im verlinkten Abschnitt. Die Datentabelle muss mindestens eine der Stringlabel-Spalten enthalten.

Jedes Objekt im Array hat die folgenden Eigenschaften:

  • column [Zahl]: Der nullbasierte Index der Spalte, die den in der Annotation verwendeten Text enthält. Sie benötigen nicht in jeder Zeile dieser Spalte einen Wert.
  • positionColumn [Zahl]: Der nullbasierte Index der Spalte, die den mit einem Label versehenen Datenpunkt enthält. Die Standardeinstellung ist die erste Datenspalte.
  • color [String]: Die Farbe des Anmerkungstexts im Farbformat der Chart API. Der Standardwert ist „#000000“ (Schwarz).
  • size [Zahl]: die Schriftgröße der Anmerkung in Pixeln.
  • priority [string] – entweder „niedrig“, „mittel“ oder „hoch“. Damit wird die Ebene angegeben, in die das Label gezeichnet werden soll. Die Standardeinstellung ist „mittel“, was bedeutet, dass das Label nach Balken und Linien, aber vor anderen Labels gezeichnet wird.
  • type [string]: entweder 'text' oder 'flag' Mit „text“ wird eine Anmerkung im Nur-Text-Format erstellt und mit „flag“ eine Anmerkung in einem Info-Pop-up.

Beispiel: Dieses Snippet definiert ein schwarzes Textlabel mit 12 Pixeln, das aus Spalte 0 stammt und dem Datenpunkt in Spalte 2 derselben Zeile zugewiesen ist: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
backgroundColor String #FFFFFF (Weiß) Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API.
Farbe String Auto Gibt die Grundfarbe an, die für alle Reihen verwendet werden soll. Jede Reihe ist eine Abstufung der angegebenen Farbe. Farben werden im Farbformat der Chart API angegeben. Wird ignoriert, wenn colors angegeben ist.
Farben Array<string> Auto Damit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben. Die Farbe i wird für die Datenspalte i verwendet und springt an den Anfang, wenn mehr Datenspalten als Farben vorhanden sind. Wenn Varianten einer einzelnen Farbe für alle Reihen zulässig sind, verwenden Sie stattdessen die Option color.
enableEvents boolean false Veranlasst, dass Diagramme vom Nutzer ausgelöste Ereignisse wie Klicks oder Mouseover auslösen. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse.
fill boolean false Falls wahr, wird der Bereich unter jeder Zeile ausgefüllt. Nur für Liniendiagramme verfügbar.
firstHiddenColumn number keine

Ein Datenspaltenindex. Die aufgeführte Spalte sowie alle nachfolgenden Spalten werden nicht zum Zeichnen der Hauptelemente der Diagrammreihe (z. B. Linien in einem Liniendiagramm oder Balken in einem Balkendiagramm) verwendet, sondern als Daten für Markierungen und andere Anmerkungen. Beachten Sie, dass Stringspalten in dieser Indexanzahl enthalten sind.
height number 200 Höhe des Diagramms in Pixeln Wenn das Element fehlt oder nicht innerhalb eines akzeptablen Bereichs liegt, wird die Höhe des enthaltenden Elements verwendet. Liegt dieser auch außerhalb des zulässigen Bereichs, wird die Standardhöhe verwendet.
Labels String „none“

[Nur Kreisdiagramm] Gibt an, welches Label (falls vorhanden) für die einzelnen Segmente angezeigt werden soll. Wählen Sie einen der folgenden Werte aus:

  • "none" (keine Labels)
  • „value“: Der Segmentwert wird als Label angezeigt.
  • 'Name': Zeigt den Segmentnamen (den Spaltennamen) als Beschriftung an.
Legende String 'rechts' Wo eine Diagrammlegende relativ zum Diagramm angezeigt werden soll. Geben Sie einen der folgenden Werte an: „top“, „bottom“, „left“, „right“, „none“. Wird in Diagrammen ohne Legenden ignoriert (z. B. Kartendiagramme).
Max. number Maximaler Datenwert Der auf der Skala angezeigte Maximalwert. Wird bei Kreisdiagrammen ignoriert. Der Standardwert ist der maximale Datenwert, außer bei Balkendiagrammen, bei denen der Standardwert der maximale Datenwert ist. Bei Balkendiagrammen wird dies ignoriert, wenn die Tabelle mehr als eine Datenspalte enthält.
Min. number Minimaler Datenwert Der auf der Skala angezeigte Minimalwert. Wird bei Kreisdiagrammen ignoriert. Der Standardwert ist der minimale Datenwert, mit Ausnahme von Balkendiagrammen, bei denen der Standardwert null ist. Bei Balkendiagrammen wird dies ignoriert, wenn die Tabelle mehr als eine Datenspalte enthält.
showCategoryLabels boolean true Legt fest, ob Labels auf der Kategorieachse (d. h. Zeile) angezeigt werden sollen Nur für Linien- und Balkendiagramme verfügbar.
showValueLabels boolean true Wahr zeigt ein Label auf der Wertachse an. Nur für Linien- und Balkendiagramme verfügbar.
singleColumnDisplay number keine Rendert nur die angegebene Datenspalte. Diese Zahl ist ein nullbasierter Index in der Tabelle, wobei Null die erste Datenspalte ist. Die Farbe, die einer einzelnen Spalte zugewiesen wird, entspricht der Farbe, die angezeigt wird, wenn alle Spalten gerendert werden. Kann nicht für Kreis- oder Kartendiagramme verwendet werden.
Titel String Leerer String Diagrammtitel Wenn keine Angabe erfolgt, wird kein Titel angezeigt. Der entsprechende Diagrammparameter ist chtt.
valueLabelsInterval number Auto Das Intervall, in dem die Labels der Wertachsen angezeigt werden sollen. Beispiel: Wenn min 0 ist, max 100 und valueLabelsInterval 20 ist, werden im Diagramm Achsenlabels bei (0, 20, 40, 60, 80 100) angezeigt.
width number 400 Breite des Diagramms in Pixeln. Wenn das Element fehlt oder nicht innerhalb eines akzeptablen Bereichs liegt, wird die Breite des Elements verwendet, in dem es enthalten ist. Liegt diese auch außerhalb des zulässigen Bereichs, wird die Standardbreite verwendet.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) Ohne Zeichnet die Karte.
getImageUrl() String Gibt die Google Chart API-URL zurück, die zum Anfordern des Diagramms verwendet wurde. Dieser kann mehr als 2.000 Zeichen lang sein. Weitere Informationen finden Sie in der Google Chart API.

Ereignisse

Wenn Sie das Attribut enableEvents auf „true“ setzen, werden in unterstützenden Diagrammen Ereignisse für Nutzerereignisse ausgelöst, die in der Tabelle unten aufgeführt sind. Bei all diesen Ereignissen wird ein event-Objekt mit den folgenden Eigenschaften zurückgegeben:

  • type: ein String, der den Ereignistyp darstellt.
  • region: eine ID für die betroffene Region. Fügen Sie dem Diagrammtyp „Rohdaten“ den Parameter chof=json hinzu, um eine Liste der verfügbaren Namen aufzurufen. Weitere Informationen finden Sie unter chof=json.
Name Beschreibung Typ „Value“
error Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. ID, Nachricht
onmouseover Wird ausgelöst, wenn der Nutzer den Mauszeiger auf ein Diagrammelement bewegt. „mouseover“
onmouseout Wird ausgelöst, wenn der Nutzer den Mauszeiger von einem Diagrammelement wegbewegt „mouseout“
onclick Wird ausgelöst, wenn ein Nutzer auf ein Diagrammelement klickt.

„Klicken“

Welche Diagramme unterstützen Ereignisse?

Alle Diagramme, die den Parameter chof=json unterstützen, unterstützen das Auslösen von Ereignissen (d. h. alle Diagramme mit Ausnahme spezieller Diagramme wie QR-Codes).

Beispiel für die Verarbeitung von Ereignissen

Das folgende Beispiel zeigt einen Balken, der Mausklicks erfasst.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Datenrichtlinie

Die Daten werden an den Google Chart API-Dienst gesendet.

Lokalisierung

Diese Visualisierung unterstützt jede vom Google Chart-Dienst unterstützte Lokalisierung.