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
chart.draw()
Questo è il metodo di base trattato nell'esempio di Hello Chart! in questa documentazione. Ecco i passaggi di base:
- Caricare il caricatore della libreria statica, visualizzazioni di Google e librerie di grafici
- Preparare i dati
- Prepara eventuali opzioni del grafico
- Crea un'istanza della classe grafico, passando un handle all'elemento contenitore della pagina.
- (Facoltativo) Registrati per ricevere qualsiasi evento nel grafico. Se intendi chiamare i metodi sul grafico, devi ascoltare l'evento "pronto".
- 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 diChartWrapper
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>