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