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
chart.draw()
Questo è il metodo di base descritto nell'esempio Hello Chart! di questa documentazione. Ecco i passaggi di base:
- Carica il caricatore delle librerie gstatic, la visualizzazione Google e le librerie dei grafici
- Preparare i dati
- Prepara le opzioni del grafico
- Crea un'istanza per la classe del grafico, passando un handle all'elemento contenitore della pagina.
- Se vuoi, registrati per ricevere eventuali eventi del grafico. Se intendi chiamare i metodi sul grafico, devi rimanere in ascolto dell'evento "ready".
- 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 diChartWrapper
.
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>