Grafico di Google
Da semplici grafici a linee a complesse mappe ad albero gerarchiche, la galleria di Google Chart offre un gran numero di tipi di grafici pronti per l'uso:
- Grafico a dispersione
- Grafico a linee
- Grafico a barre/colonne
- Grafico ad area
- Grafico a torta
- Grafico a ciambella
- Organigramma
- Mappa / Grafico geografico
Come utilizzare Google Chart?
Per utilizzare Google Chart nella tua pagina web, aggiungi un link al caricatore dei grafici:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart è facile da usare.
Basta aggiungere un elemento <div> per visualizzare il grafico:
<div id="myChart" style="max-width:700px; height:400px"></div>
L'elemento <div> deve avere un ID univoco.
Quindi carica l'API di Google Graph:
- Carica l'API di visualizzazione e il pacchetto corechart
- Imposta una funzione di callback da chiamare quando l'API viene caricata
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
È tutto!
Grafico a linee
Codice sorgente
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Grafici a dispersione
Per tracciare a dispersione gli stessi dati, cambia google.visualization in ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
Grafici a barre
Codice sorgente
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Grafici a torta
Per convertire un grafico a barre in un grafico a torta , sostituisci semplicemente:
google.visualization. Grafico a barre con: google.visualization
. Grafico a torta
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
Torta 3D
Per visualizzare la torta in 3D, aggiungi semplicemente is3D: true alle opzioni:
var options = {
title: 'World Wide Wine Production',
is3D: true
};