Barra degli strumenti

  1. Panoramica
  2. Esempio
  3. Utilizzo
    1. Tipi di output
    2. Sintassi
  4. Norme sui dati

Panoramica

Puoi aggiungere un elemento della barra degli strumenti a qualsiasi visualizzazione per consentire all'utente di esportare i dati sottostanti in un file CSV o in una tabella HTML oppure per fornire il codice per incorporare la visualizzazione in una pagina web o un gadget arbitrario.

Di: Google

Esempio

Seleziona una delle opzioni nella barra degli strumenti.

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

Utilizzo

Aggiungi una barra degli strumenti alla pagina chiamando il metodo google.visualization.drawToolbar(), compilandola con i tipi di esportazione consentiti e i dati richiesti per ciascuno.

Per utilizzare una barra degli strumenti, la visualizzazione deve prendere i dati da un URL; non puoi passare in oggetti DataTable o DataView compilati a mano. Dovrai passare l'URL dei dati utilizzati per completare la visualizzazione al metodo drawToolbar().

Se vuoi fornire un componente Google o un iframe incorporabile che contenga il gadget, devi disporre di un URL per una versione della visualizzazione gadget.

Tipi di output

La barra degli strumenti può offrire all'utente la possibilità di scegliere uno o più dei seguenti tipi di output, a seconda di come la configuri nel metodo drawToolbar():

  • Una versione CSV semplice dei dati (che il browser eseguirà il rendering oppure offrirà di scaricare e salvare, a seconda della configurazione del browser; e/o
  • Una tabella HTML contenente i dati, aperta in una nuova finestra del browser e/o
  • Codice HTML <iframe> per incorporare questa visualizzazione in una pagina web e/o
  • Un link alla pagina che consente all'utente di incorporare questo gadget nella propria pagina di Blogger.

Sintassi

google.visualization.drawToolbar(container, components)

Parametri

contenitore
Un handle per un elemento DOM nella pagina. L'API disegna la barra degli strumenti in questo elemento. È simile al parametro del contenitore per una visualizzazione standard. Devi posizionare la barra degli strumenti accanto alla visualizzazione che la utilizza.
componenti
Un array di oggetti, ognuno dei quali descrive un formato in cui è possibile esportare i dati o la visualizzazione. La barra degli strumenti mostrerà le opzioni all'utente nell'ordine aggiunto all'array. Ogni oggetto ha una proprietà type che descrive il formato e una o più proprietà aggiuntive, a seconda del tipo:
  • type: 'csv': questa opzione esporta i dati in un file di valori separati da virgole. Nel browser si aprirà la finestra di dialogo "Salva con nome".
    • origine dati: "string": l'URL dell'origine dati.
  • type: html': questa opzione consente di esportare i dati in una tabella HTML. La pagina con la tabella dati si aprirà in una nuova finestra del browser.
    • datasource: la stringa dell'URL dell'origine dati.
  • type: igoogle: questa opzione consente all'utente di aggiungere la visualizzazione alla propria pagina AdMob. Nel browser si aprirà una pagina "Aggiungi a Google". Utilizza questa opzione solo se la visualizzazione è disponibile in una versione con gadget.
    • datasource: la stringa dell'URL dell'origine dati.
    • Gadget: la stringa dell'URL XML della versione gadget. Tieni presente che la visualizzazione a cui è associata la barra degli strumenti non deve necessariamente essere la versione gadget.
    • userprefs: un oggetto preferenze facoltativo appropriato per questa visualizzazione, che specifica le preferenze di visualizzazione.
  • type: htmlcode: questa opzione crea un blocco di codice HTML che l'utente può incorporare in una pagina web per visualizzarne la visualizzazione all'interno di un iframe. Nel browser si aprirà una finestra popup con l'esatto elemento HTML del gadget.Da utilizzare solo se la visualizzazione è disponibile in una versione gadget.
    • datasource: la stringa dell'URL dell'origine dati.
    • Gadget: la stringa url del file XML del gadget.
    • userprefs: un oggetto preferenze facoltativo appropriato per questa visualizzazione, che specifica le preferenze di visualizzazione.
    • style: una stringa facoltativa per lo stile dell'iframe. Ad esempio: "larghezza: 300px; altezza: 500px;".

Esempio

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

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server. Per alcuni componenti, i dati vengono recuperati dalla rispettiva origine dati assegnata alla barra degli strumenti.

Localizzazione

Al momento la barra degli strumenti supporta solo l'inglese americano.