Google Grafikler - Tablo Grafiği
Tablo grafiği, sıralanabilen ve sayfalanabilen bir tablo oluşturmaya yardımcı olur. Tablo hücreleri, biçim dizeleri kullanılarak veya hücre değerleri olarak doğrudan HTML eklenerek biçimlendirilebilir. Sayısal değerler varsayılan olarak sağa hizalanır; boole değerleri, onay işaretleri veya çarpı işaretleri olarak görüntülenir. Kullanıcılar klavye veya fare ile tek satırları seçebilirler. Sıralama için sütun başlıkları kullanılabilir. Başlık satırı kaydırma sırasında sabit kalır. Tablo, kullanıcı etkileşimine karşılık gelen olayları tetikler. Bu grafiği çizmek için kullanılan yapılandırmayı Google Grafik Yapılandırma Sözdizimi bölümünde görmüştük . Öyleyse, tam örneğe bakalım.
Konfigürasyonlar
Kullandık Table Tablo tabanlı grafiği göstermek için sınıf.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Misal
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>Sonuç
Sonucu doğrulayın.