Google Charts - Sintaks Konfigurasi
Dalam bab ini, kami akan menunjukkan konfigurasi yang diperlukan untuk menggambar grafik menggunakan Google Chart API.
Langkah 1: Buat Halaman HTML
Buat halaman HTML dengan perpustakaan Google Chart.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Sini containerdiv digunakan untuk memuat grafik yang digambar menggunakan pustaka Google Chart. Di sini kami memuat versi terbaru dari corecharts API menggunakan metode google.charts.load.
Langkah 2: Buat konfigurasi
Perpustakaan Google Chart menggunakan konfigurasi yang sangat sederhana menggunakan sintaks json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Di sini data merepresentasikan data json dan opsi merepresentasikan konfigurasi yang digunakan library Google Chart untuk menggambar diagram dalam div kontainer menggunakan metode draw (). Sekarang kita akan mengkonfigurasi berbagai parameter untuk membuat string json yang diperlukan.
judul
Konfigurasikan opsi grafik.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabel data
Konfigurasikan data yang akan ditampilkan pada grafik. DataTable adalah kumpulan terstruktur tabel khusus yang berisi data bagan. Kolom tabel data mewakili legenda dan baris mewakili data yang sesuai. Metode addColumn () digunakan untuk menambahkan kolom di mana parameter pertama mewakili tipe data dan parameter kedua mewakili legenda. addRows () metode digunakan untuk menambahkan baris yang sesuai.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Langkah 3: Gambar grafiknya
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Contoh
Berikut adalah contoh lengkapnya -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Berikut kode panggilan fungsi drawChart untuk menggambar grafik ketika pustaka Google Chart dimuat sepenuhnya.
google.charts.setOnLoadCallback(drawChart);Hasil
Verifikasi hasilnya.