Google grafiek
Van eenvoudige lynkaarte tot komplekse hiërargiese boomkaarte, die Google Chart-galery bied 'n groot aantal gereed-vir-gebruik grafiektipes:
- Spreikaart
- Lyngrafiek
- Staaf-/kolomgrafiek
- Area Grafiek
- Sirkelgrafiek
- Doughnut Chart
- Organisasie grafiek
- Kaart / geografiek
Hoe om Google Chart te gebruik?
Om Google Chart in jou webblad te gebruik, voeg 'n skakel by die kaartlaaier:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart is maklik om te gebruik.
Voeg net 'n <div> -element by om die grafiek te vertoon:
<div id="myChart" style="max-width:700px; height:400px"></div>
Die <div>-element moet 'n unieke id hê.
Laai dan die Google Graph API:
- Laai die Visualization API en die corechart-pakket
- Stel 'n terugbelfunksie om te bel wanneer die API gelaai is
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
Dis al!
Lyngrafiek
Bronkode
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);
}
Strooi erwe
Om dieselfde data uit te strooi , verander google.visualization na ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
Staafgrafieke
Bronkode
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);
}
Sirkeldiagramme
Om 'n staafgrafiek na 'n sirkelgrafiek om te skakel , vervang net:
google.visualization. Staafgrafiek
met:
google.visualization. Sirkelgrafiek
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D Pastei
Om die pastei in 3D te vertoon, voeg net is3D by: getrou aan die opsies:
var options = {
title: 'World Wide Wine Production',
is3D: true
};