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 gadget arbitraria.

Di: Google

Esempio

Seleziona una delle opzioni della 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 tua pagina chiamando il metodo google.visualization.drawToolbar(), completandola con i tipi di esportazione consentiti e i dati richiesti per ognuno.

Per utilizzare una barra degli strumenti, la visualizzazione deve recuperare i dati da un URL; non puoi trasmettere oggetti DataTable o DataView completati manualmente. Passerai l'URL dei dati utilizzati per completare la visualizzazione nel metodo drawToolbar().

Se vuoi fornire un componente iGoogle o un iframe incorporabile che contenga il gadget, devi avere un URL per una versione della visualizzazione visibile nel 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 semplice versione CSV dei dati (che verrà visualizzata o offerta dal browser per il download e il salvataggio, a seconda della configurazione del browser e/o del browser)
  • Una tabella HTML contenente i dati, aperta in una nuova finestra del browser e/o
  • il 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 sua pagina iGoogle.

Sintassi

google.visualization.drawToolbar(container, components)

Parametri

contenitore
Un handle di un elemento DOM sulla pagina. L'API tratterà la barra degli strumenti in questo elemento. Si tratta di un parametro simile al parametro container per una visualizzazione standard. La barra degli strumenti deve essere adiacente alla visualizzazione che la utilizza.
componenti
Un array di oggetti, ognuno dei quali descrive un formato in cui i dati, o la visualizzazione, possono essere esportati. La barra degli strumenti mostrerà le opzioni all'utente nell'ordine in cui sono state aggiunte 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 consente di esportare i dati in un file con valore separato da virgole. Nel browser si aprirà una finestra di dialogo "Salva con nome".
    • datasource: "stringa": l'URL dell'origine dati.
  • type: html': questa opzione consente di esportare i dati in una tabella HTML. La pagina con la tabella di 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 iGoogle. Nel browser si aprirà una pagina "Aggiungi a iGoogle". Da utilizzare 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 gadgetizzata. Tenete presente che la visualizzazione a cui è associata la barra degli strumenti non deve essere la versione in gadgeting.
    • userprefs: un oggetto preferenze facoltativo appropriato per questa visualizzazione, specificando le preferenze di visualizzazione.
  • type: htmlcode: questa opzione crea un blocco di codice HTML che l'utente può incorporare in una pagina web per visualizzare la visualizzazione all'interno di un iframe. Nel browser si aprirà una finestra popup con l'esatto elemento HTML del gadget.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 del file XML del gadget.
    • userprefs: un oggetto preferenze facoltativo appropriato per questa visualizzazione, specificando le preferenze di visualizzazione.
    • style: una stringa facoltativa per lo stile dell'iframe. Ad esempio: "larghezza: 300 px; altezza: 500 px;".

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 ad alcun server. Per alcuni componenti, i dati vengono recuperati dalla rispettiva origine dati fornita alla barra degli strumenti.

Localizzazione

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