Pasek narzędzi

  1. Overview
  2. Przykład
  3. Użycie
    1. Typy danych wyjściowych
    2. Składnia
  4. Zasady dotyczące danych

Omówienie

Do dowolnej wizualizacji możesz dodać element paska narzędzi, aby umożliwić użytkownikowi wyeksportowanie danych bazowych do pliku CSV lub tabeli HTML albo przesłanie kodu umożliwiającego umieszczenie wizualizacji na dowolnej stronie internetowej lub w wybranym gadżecie.

Autor: Google

Przykład

Wybierz jedną z opcji na pasku narzędzi.

<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>

Wykorzystanie

Dodaj do swojej strony pasek narzędzi, wywołując metodę google.visualization.drawToolbar(), podając dozwolone typy eksportu oraz dane wymagane w przypadku każdego z nich.

Aby można było używać paska narzędzi, wizualizacja musi pobierać dane z adresu URL. Nie można przekazywać ręcznie wypełnionych obiektów DataTable lub DataView. Do metody drawToolbar() przekażesz adres URL danych używanych do wypełniania wizualizacji.

Jeśli chcesz udostępnić komponent strony głównej lub osadzony element iframe, w którym znajduje się gadżet, musisz mieć adres URL wersji wizualizacji utworzonej za pomocą gadżetów.

Typy danych wyjściowych

W zależności od tego, jak skonfigurujesz pasek narzędzi w metodzie drawToolbar(), użytkownik może wybrać co najmniej 1 z tych typów danych wyjściowych:

  • prostą wersję CSV z danymi (którą w zależności od konfiguracji przeglądarki przeglądarka wyrenderuje lub zaproponuje pobranie i zapisanie);
  • w tabeli HTML zawierającej dane, otwartej w nowym oknie przeglądarki;
  • kod HTML <iframe>, który pozwala umieścić tę wizualizację na stronie internetowej;
  • Link do strony, na której użytkownik może umieścić ten gadżet na swojej stronie {5}.

Składnia

google.visualization.drawToolbar(container, components)

Parametry

kontener
Uchwyt elementu DOM na stronie. Interfejs API wyświetli pasek narzędzi do tego elementu. Przypomina to parametr kontenera w standardowej wizualizacji. Pasek narzędzi należy umieścić obok wizualizacji, która z niego korzysta.
komponenty
Tablica obiektów, z których każdy opisuje format, do którego można wyeksportować dane lub wizualizację. Pasek narzędzi będzie udostępniać opcje użytkownikowi w kolejności dodania do tablicy. Każdy obiekt ma właściwość type opisującą format oraz co najmniej 1 właściwości dodatkową, w zależności od typu:
  • type: 'csv' – ta opcja eksportuje dane do pliku z wartościami rozdzielonymi przecinkami. W przeglądarce zostanie otwarte okno dialogowe „Zapisz jako”.
    • datasource: 'ciąg znaków' – adres URL źródła danych.
  • type: html' – ta opcja eksportuje dane do tabeli HTML. W nowym oknie przeglądarki otworzy się strona z tabelą danych.
    • datasource: ciąg znaków adresu URL źródła danych.
  • type: igoogle – ta opcja umożliwia użytkownikowi dodanie wizualizacji do strony głównej. W przeglądarce zostanie otwarta strona dodawania do strony {5}. Używaj tej funkcji tylko wtedy, gdy wizualizacja jest dostępna w wersji z gadżetami.
    • datasource: ciąg znaków adresu URL źródła danych.
    • gadget: ciąg znaków adresu URL XML wersji gadżetu. Pamiętaj, że wizualizacja, z którą powiązany jest pasek narzędzi, nie musi być wersją z gadżetami.
    • userprefs: opcjonalny obiekt preferencji odpowiedni dla tej wizualizacji, określający preferencje wizualizacji.
  • type: htmlcode – ta opcja powoduje utworzenie bloku kodu HTML, który użytkownik może umieścić na stronie internetowej, aby wyświetlić wizualizację w elemencie iframe. W przeglądarce otworzy się wyskakujące okienko z dokładnym elementem html gadżetu.Używaj tej opcji tylko wtedy, gdy wizualizacja jest dostępna w wersji z gadżetami.
    • datasource: ciąg znaków adresu URL źródła danych.
    • gadget: ciąg znaków adresu URL XML gadżetu.
    • userprefs: opcjonalny obiekt preferencji odpowiedni dla tej wizualizacji, określający preferencje wizualizacji.
    • style: opcjonalny ciąg znaków określający styl elementu iframe. Na przykład: „width: 300px; height: 500px;”.

Przykład

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);
};

Zasady dotyczące danych

Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer. W przypadku niektórych komponentów dane są pobierane z odpowiedniego źródła danych podanego na pasku narzędzi.

Lokalizacja

Obecnie pasek narzędzi obsługuje tylko język angielski (USA).