Pasek narzędzi

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

Omówienie

Do każdej wizualizacji możesz dodać element paska narzędzi, aby umożliwić użytkownikowi eksportowanie danych bazowych do pliku CSV lub tabeli HTML albo podanie kodu do umieszczenia wizualizacji w dowolnej witrynie lub 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>

Użycie

Dodaj do strony pasek narzędzi, wywołując metodę google.visualization.drawToolbar(), dodając do niej typy eksportowanych danych i dane wymagane dla 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łnianych obiektów DataTable lub DataView. Przekazujesz adres URL danych używanych do wypełniania wizualizacji za pomocą metody drawToolbar().

Jeśli chcesz udostępnić komponent iGoogle lub element iframe, w którym jest umieszczony gadżet, musisz określić adres URL wersji wizualizowanej za pomocą gadżetu.

Typy danych wyjściowych

W zależności od konfiguracji metody drawToolbar() w narzędziu możesz wybrać dla użytkownika co najmniej 1 z tych typów danych wyjściowych:

  • Prosta wersja pliku CSV (którą przeglądarka może wyrenderować lub zaoferować do pobrania, w zależności od konfiguracji przeglądarki)
  • tabeli HTML zawierającej dane otwarte w nowym oknie przeglądarki;
  • kod HTML <iframe> do umieszczenia tej wizualizacji na stronie internetowej lub
  • Link do strony, na której użytkownik może umieścić ten gadżet na swojej stronie iGoogle.

Składnia

google.visualization.drawToolbar(container, components)

Parametry

kontener
Nick do elementu DOM na stronie. Interfejs API wciągnie pasek narzędzi do tego elementu. Jest on podobny do parametru kontenera w standardowej wizualizacji. Pasek narzędzi należy umieścić obok wizualizacji, która z niego korzysta.
komponenty
Tablica obiektów, do których można wyeksportować format danych lub wizualizację. Pasek narzędzi udostępni opcje użytkownikowi w kolejności dodanej do tablicy. Każdy obiekt ma właściwość typu z opisem formatu i 1 lub więcej właściwości dodatkowych w zależności od typu:
  • type: 'csv' – ta opcja eksportuje dane do pliku wartości rozdzielanych przecinkami. W przeglądarce otworzy się okno dialogowe „Zapisz jako”.
    • datasource: „ciąg znaków” – adres URL źródła danych.
  • type: html' – ta opcja eksportuje dane do tabeli HTML. Strona z tabelą danych otworzy się w nowym oknie przeglądarki.
    • datasource: ciąg znaków adresu URL źródła danych.
  • type: igoogle – ta opcja umożliwia użytkownikowi dodanie wizualizacji do strony iGoogle. W przeglądarce zostanie otwarta strona „Dodaj do strony iGoogle”. Użyj tej opcji tylko wtedy, gdy wizualizacja jest dostępna w wersji gadżetu.
    • datasource: ciąg znaków adresu URL źródła danych.
    • gadget: ciąg znaków adresu URL w formacie xml. Pamiętaj, że wizualizacja, z którą jest powiązany pasek narzędzi, nie musi być wersją gadżetu.
    • userprefs: opcjonalny obiekt preferencji odpowiednich dla tej wizualizacji, określający preferencje preferencji wizualizacji.
  • type: htmlcode – ta opcja tworzy blok kodu HTML, który użytkownik może umieścić na stronie, aby wyświetlać wizualizację w elemencie iframe. W przeglądarce otworzy się wyskakujące okienko z elementem HTML gadżetu.Użyj tej opcji tylko wtedy, gdy wizualizacja jest dostępna w wersji gadżetu.
    • datasource: ciąg znaków adresu URL źródła danych.
    • gadget: ciąg znaków adresu URL gadżetu w formacie xml.
    • userprefs: opcjonalny obiekt preferencji odpowiednich dla tej wizualizacji, określający preferencje preferencji 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 do żadnego serwera. W przypadku niektórych komponentów dane są pobierane z odpowiedniego źródła danych na pasku narzędzi.

Lokalizacja

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