Tecniche di disegno di un grafico

Questa pagina elenca i diversi modi in cui puoi creare un'istanza e disegnare un grafico nella pagina. Ogni metodo presenta vantaggi e svantaggi, come elencato di seguito.

Contenuti

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Ulteriori informazioni

chart.draw()

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

  1. Carica il caricatore delle librerie gstatic, la visualizzazione Google e le librerie dei grafici
  2. Preparare i dati
  3. Prepara le opzioni del grafico
  4. Crea un'istanza per la classe del grafico, passando un handle all'elemento contenitore della pagina.
  5. Se vuoi, registrati per ricevere eventuali eventi del grafico. Se intendi chiamare i metodi sul grafico, devi rimanere in ascolto dell'evento "ready".
  6. Chiama chart.draw(), trasmettendo dati e opzioni.

Vantaggi:

  • Hai il controllo completo di ogni fase del processo.
  • Puoi registrarti per rimanere in ascolto di tutti gli eventi generati dal grafico.

Svantaggi:

  • Livello dettagliato
  • Devi caricare esplicitamente tutte le librerie di grafici necessarie.
  • Se invii query, devi implementarlo manualmente per il callback, verificare l'esito positivo, estrarre il valore DataTable restituito e passarlo 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>

ChartWrapper

ChartWrapper è una classe pratica che gestisce il caricamento di tutte le librerie di grafici appropriate per te e semplifica l'invio delle query alle origini dati degli strumenti per grafici.

Vantaggi:

  • Molto meno codice
  • Carica per te tutte le librerie di grafici necessarie
  • Semplifica molto più facilmente l'esecuzione di query su origini dati creando l'oggetto Query e gestendo il callback per te
  • Passa l'ID dell'elemento contenitore, 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:

  • Al momento ChartWrapper propaga solo gli eventi select, ready e error. Per ricevere altri eventi, devi ottenere un handle nel grafico aggregato e iscriverti agli eventi che contiene. Per alcuni esempi, consulta la documentazione di ChartWrapper.

Esempi:

Ecco un esempio di grafico a colonne con dati creati localmente specificati come array. Non puoi specificare etichette del grafico o valori data/ora utilizzando la sintassi dell'array, ma potresti creare manualmente un oggetto DataTable con questi valori e trasmetterlo 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 grafico a linee che ottiene i dati eseguendo una query su un foglio di lavoro Google. Tieni presente che non è necessario che il codice gestisca 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 il caricamento automatico, può creare codice 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 grafici con ChartWrapper

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

Puoi incorporare un editor di grafici nella tua pagina e mostrare agli utenti metodi per connettersi ad altre origini dati e restituire la stringa ChartWrapper. Per saperne di più, consulta la documentazione di riferimento di ChartEditor.

 

DrawChart()

DrawChart è un metodo statico globale che aggrega un ChartWrapper.

Vantaggi:

  • Uguale a ChartWrapper, ma leggermente più breve da utilizzare.

Svantaggi:

  • Non restituisce un handle al wrapper, quindi non potrai 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>

Ulteriori informazioni