Symbolleiste

  1. Overview
  2. Beispiel
  3. Nutzung
    1. Ausgabetypen
    2. Syntax
  4. Datenrichtlinie

Übersicht

Sie können jeder Visualisierung ein Symbolleistenelement hinzufügen, damit der Nutzer die zugrunde liegenden Daten in eine CSV-Datei oder HTML-Tabelle exportieren oder Code bereitstellen kann, um die Visualisierung in eine beliebige Webseite oder ein beliebiges Gerät einzubetten.

Von: Google

Beispiel

Wählen Sie eine der Optionen in der Symbolleiste aus.

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

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

Nutzung

Fügen Sie Ihrer Seite eine Symbolleiste hinzu, indem Sie die Methode google.visualization.drawToolbar() aufrufen und die zulässigen Exporttypen und die jeweils erforderlichen Daten darin angeben.

Wenn Sie eine Symbolleiste verwenden möchten, müssen die Daten der Visualisierung aus einer URL abgerufen werden. Sie können keine manuell ausgefüllten DataTable- oder DataView-Objekte übergeben. Sie übergeben die URL der Daten, die zum Ausfüllen der Visualisierung verwendet werden, an die Methode drawToolbar().

Wenn Sie eine iGoogle-Komponente oder einen einbettbaren iFrame bereitstellen möchten, der das Gadgets enthält, benötigen Sie eine URL für eine Gadgets-Version der Visualisierung.

Ausgabetypen

Über die Symbolleiste kann der Nutzer einen oder mehrere der folgenden Ausgabetypen auswählen, je nachdem, wie Sie die Symbolleiste in der Methode drawToolbar() konfigurieren:

  • Eine einfache CSV-Version der Daten (die Ihr Browser je nach Browserkonfiguration rendert oder anbietet, sie herunterzuladen und zu speichern) und/oder
  • Eine HTML-Tabelle mit den Daten, die in einem neuen Browserfenster geöffnet wird, und/oder
  • HTML-<iframe>-Code zum Einbetten dieser Visualisierung in eine Webseite und/oder
  • Ein Link zu einer Seite, über die der Nutzer dieses Gadgets in seine Seite einbetten kann.

Syntax

google.visualization.drawToolbar(container, components)

Parameter

Container
Ein Handle zu einem DOM-Element auf der Seite. Die API zieht die Symbolleiste in dieses Element ein. Dies ähnelt dem Containerparameter für eine Standardvisualisierung. Sie sollten die Symbolleiste neben der Visualisierung platzieren, in der sie verwendet wird.
Komponenten
Ein Array von Objekten, die jeweils ein Format beschreiben, in das die Daten oder die Visualisierung exportiert werden können. In der Symbolleiste werden dem Nutzer die Optionen in der Reihenfolge angezeigt, in der sie dem Array hinzugefügt wurden. Jedes Objekt hat eine Typeigenschaft, die das Format beschreibt, und je nach Typ ein oder mehrere zusätzliche Attribute:
  • type: 'csv': Mit dieser Option werden die Daten in eine Datei mit kommagetrennten Werten exportiert. Im Browser wird ein Dialogfeld „Speichern unter“ geöffnet.
    • datasource: string – URL der Datenquelle
  • type: html': Mit dieser Option werden die Daten in eine HTML-Tabelle exportiert. Die Seite mit der Datentabelle wird in einem neuen Fenster im Browser geöffnet.
    • datasource: URL-String der Datenquelle.
  • type: igoogle: Mit dieser Option kann der Nutzer die Visualisierung zu seiner iGoogle-Seite hinzufügen. Im Browser wird eine Seite zum Hinzufügen zu iGoogle geöffnet. Verwende diese Option nur, wenn die Visualisierung in einer Gadgets-Version verfügbar ist.
    • datasource: URL-String der Datenquelle.
    • gadget: XML-URL-String der Gadgets-Version Die Visualisierung, der die Symbolleiste zugeordnet ist, muss nicht die als Gadgets enthaltene Version sein.
    • userprefs: Ein optionales Einstellungsobjekt, das für diese Visualisierung geeignet ist und die Visualisierungseinstellungen angibt.
  • type: htmlcode: Mit dieser Option wird ein HTML-Codeblock erstellt, den der Nutzer in eine Webseite einbetten kann, um die Visualisierung in einem iFrame anzuzeigen. Im Browser wird ein Pop-up-Fenster mit dem exakten HTML-Element des Gadgets geöffnet.Verwenden Sie dieses Fenster nur, wenn die Visualisierung in einer Gadgets-Version verfügbar ist.
    • datasource: URL-String der Datenquelle.
    • gadget: Der URL-String im XML-Code des Gadgets.
    • userprefs: Ein optionales Einstellungsobjekt, das für diese Visualisierung geeignet ist und die Visualisierungseinstellungen angibt.
    • style: Ein optionaler String für den Stil des iFrames. Beispiel: „width: 300px;height: 500px;“.

Beispiel

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

Datenrichtlinie

Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet. Bei einigen Komponenten werden die Daten aus der jeweiligen Datenquelle entnommen, die in der Symbolleiste angezeigt wird.

Lokalisierung

Die Toolbar unterstützt derzeit nur US-Englisch.