Google Charts - Bagan Tabel
Bagan tabel membantu dalam merender tabel yang dapat diurutkan dan diberi halaman. Sel tabel dapat diformat menggunakan string format, atau dengan langsung memasukkan HTML sebagai nilai sel. Nilai numerik diratakan ke kanan secara default; nilai boolean ditampilkan sebagai tanda centang atau tanda silang. Pengguna dapat memilih satu baris baik dengan keyboard atau mouse. Tajuk kolom dapat digunakan untuk menyortir. Baris tajuk tetap tetap selama pengguliran. Tabel mengaktifkan peristiwa yang sesuai dengan interaksi pengguna. Kita telah melihat konfigurasi yang digunakan untuk menggambar diagram ini di bab Sintaks Konfigurasi Diagram Google . Jadi, mari kita lihat contoh lengkapnya.
Konfigurasi
Kami telah menggunakan Table kelas untuk menunjukkan grafik berbasis tabel.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Contoh
googlecharts_table_chart.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: ['table']});
</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', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Hasil
Verifikasi hasilnya.