Symbolleiste

  1. Übersicht
  2. Beispiel
  3. Nutzung
    1. Ausgabetypen
    2. Syntax
  4. Datenrichtlinie

Übersicht

Sie können einer Visualisierung ein Symbolleistenelement hinzufügen, damit der Nutzer die zugrunde liegenden Daten in eine CSV-Datei oder eine HTML-Tabelle exportieren oder Code zur Einbettung der Visualisierung in eine beliebige Webseite oder ein beliebiges Gadget bereitstellen kann.

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 darin die zulässigen Exporttypen und die jeweils erforderlichen Daten angeben.

Zur Verwendung einer Symbolleiste muss die Visualisierung ihre Daten von einer URL abrufen. Sie können keine manuell ausgefüllten DataTable- oder DataView-Objekte übergeben. Sie übergeben die URL der Daten, mit denen Ihre Visualisierung gefüllt wird, an die Methode drawToolbar().

Wenn Sie eine iGoogle-Komponente oder einen einbettbaren iFrame mit dem Gadget bereitstellen möchten, benötigen Sie eine URL für eine Gadget-Version der Visualisierung.

Ausgabetypen

Die Symbolleiste kann dem Nutzer einen oder mehrere der folgenden Ausgabetypen anbieten, je nachdem, wie Sie die Symbolleiste in der Methode drawToolbar() konfigurieren:

  • Eine einfache CSV-Version der Daten, die dein Browser je nach Browserkonfiguration entweder rendern oder speichern und/oder anbieten kann.
  • 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 zur Seite, über die der Nutzer dieses Gadget auf seiner iGoogle-Seite einbetten kann.

Syntax

google.visualization.drawToolbar(container, components)

Parameter

Container
Ein Handle für ein DOM-Element auf der Seite. Die API zeichnet die Symbolleiste in dieses Element. Dies ähnelt dem Containerparameter für eine Standardvisualisierung. Platzieren Sie die Symbolleiste neben der Visualisierung, 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. Die Symbolleiste zeigt die Optionen für den Nutzer in der Reihenfolge an, die dem Array hinzugefügt wurde. Jedes Objekt hat eine Typeigenschaft, die das Format beschreibt, und eine oder mehrere zusätzliche Eigenschaften, je nach Typ:
  • type: 'csv': Mit dieser Option werden die Daten in eine Datei mit kommagetrennten Werten exportiert. Im Browser wird das Dialogfeld „Speichern unter“ geöffnet.
    • datasource: string: Die URL der Datenquelle.
  • type: html': Mit dieser Option werden die Daten in eine HTML-Tabelle exportiert. Die Seite mit der Datentabelle wird im Browser in einem neuen Fenster geöffnet.
    • datasource: Der URL-String der Datenquelle.
  • type: igoogle: Mit dieser Option kann der Nutzer die Visualisierung zu seiner iGoogle-Seite hinzufügen. Im Browser wird die Seite „Zu iGoogle hinzufügen“ geöffnet. Verwenden Sie diese Option nur, wenn die Visualisierung in einer Gadget-Version verfügbar ist.
    • datasource: Der URL-String der Datenquelle.
    • gadget: Der XML-URL-String der Gadget-Version Die Visualisierung, mit der die Symbolleiste verknüpft ist, muss nicht die Gadget-Version sein.
    • userprefs: Ein optionales Einstellungsobjekt für diese Visualisierung, mit dem die Visualisierungseinstellungen angegeben werden.
  • 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. Ein Pop-up-Fenster mit dem genauen HTML-Element des Gadgets wird im Browser geöffnet.Verwende diese Option nur, wenn die Visualisierung in einer Gadget-Version verfügbar ist.
    • datasource: Der URL-String der Datenquelle.
    • gadget: Der Gadget-XML-URL-String
    • userprefs: Ein optionales Einstellungsobjekt für diese Visualisierung, mit dem die Visualisierungseinstellungen angegeben werden.
    • 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

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet. Bei einigen Komponenten stammen die Daten aus der jeweiligen Datenquelle der Symbolleiste.

Lokalisierung

Die Symbolleiste unterstützt derzeit nur US-Englisch.