Tecniche di disegno grafico

Questa pagina elenca i diversi modi per creare un'istanza e disegnare un grafico sulla pagina. Ciascun metodo presenta vantaggi e svantaggi, come indicato di seguito.

Contenuti

  1. grafico.draw()
  2. Wrapper wrapper
  3. Disegnare()
  4. Scopri di più

chart.draw()

Questo è il metodo di base trattato nell'esempio di Hello Chart! in questa documentazione. Ecco i passaggi di base:

  1. Caricare il caricatore della libreria statica, visualizzazioni di Google e librerie di grafici
  2. Preparare i dati
  3. Prepara eventuali opzioni del grafico
  4. Crea un'istanza della classe grafico, passando un handle all'elemento contenitore della pagina.
  5. (Facoltativo) Registrati per ricevere qualsiasi evento nel grafico. Se intendi chiamare i metodi sul grafico, devi ascoltare l'evento "pronto".
  6. Chiama chart.draw(), trasmettendo i dati e le opzioni.

Vantaggi:

  • Hai il pieno controllo di ogni fase del processo.
  • Puoi registrarti per ascoltare tutti gli eventi generati dal grafico.

Svantaggi:

  • Dettagliata
  • Devi caricare esplicitamente tutte le librerie di grafici richieste.
  • Se invii query, devi implementarle manualmente per richiamare, controllarne l'esito positivo, estrarre il DataTable restituito e trasmetterlo al grafico.

Esempio:

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

Wrapper wrapper

ChartWrapper è una classe di convenienza che gestisce il caricamento di tutte le librerie di grafici appropriate per te e semplifica anche l'invio di query alle origini dati di Chart Tools.

Vantaggi:

  • Meno codice
  • Carica tutte le librerie di grafici richieste per te
  • Semplifica l'esecuzione di query sulle origini dati in quanto consente di creare l'oggetto Query e di gestire il callback per te
  • Passa l'ID dell'elemento del container, che chiamerà getElementByID per te.
  • I dati possono essere inviati in diversi formati: come array di valori, come stringa letterale JSON o come handle DataTable

Svantaggi:

  • Attualmente ChartWrapper propaga solo gli eventi di selezione, pronto ed errore. Per ottenere altri eventi, devi avere un handle nel grafico con wrapping e iscriverti agli eventi lì. Consulta la documentazione di ChartWrapper per alcuni esempi.

Esempi:

Ecco un esempio di grafico a colonne con dati creati localmente specificati come array. Non puoi specificare etichette di grafici o valori data/ora utilizzando la sintassi dell'array, ma puoi creare manualmente un oggetto DataTable con questi valori e trasmetterli alla proprietà dataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Ecco un esempio di un grafico a linee che raccoglie i dati eseguendo una query su un foglio di lavoro Google. Tieni presente che il codice non deve gestire il callback.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

In combinazione con la caricamento automatico, il codice può essere molto compatto.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Utilizzo dell'editor di grafici con ChartWrapper

Puoi utilizzare la finestra di dialogo dell'editor di grafici integrata in Fogli di lavoro Google per progettare un grafico e richiedere la stringa serializzata ChartWrapper che rappresenta il grafico. Puoi quindi copiare e incollare questa stringa e utilizzarla come descritto in ChartWrapper in precedenza.

Puoi incorporare un editor di grafici nella tua pagina ed esporre metodi per consentire agli utenti di connettersi ad altre origini dati e restituire la stringa ChartWrapper. Per ulteriori informazioni, consulta la documentazione di riferimento per ChartEditor.

 

Traccia grafico()

DrawChart è un metodo statico globale che aggrega un ChartWrapper.

Vantaggi:

  • Come ChartWrapper, ma con un tempo di utilizzo leggermente più breve.

Svantaggi:

  • Non restituisce un handle al wrapper, quindi non puoi gestire alcun evento.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Scopri di più