Google Charts - Tabellendiagramm
Das Tabellendiagramm hilft beim Rendern einer Tabelle, die sortiert und ausgelagert werden kann. Tabellenzellen können mithilfe von Formatzeichenfolgen oder durch direktes Einfügen von HTML als Zellenwerte formatiert werden. Numerische Werte sind standardmäßig rechtsbündig ausgerichtet. Boolesche Werte werden als Häkchen oder Kreuzzeichen angezeigt. Benutzer können einzelne Zeilen entweder mit der Tastatur oder der Maus auswählen. Spaltenüberschriften können zum Sortieren verwendet werden. Die Kopfzeile bleibt während des Bildlaufs fest. Die Tabelle löst Ereignisse aus, die der Benutzerinteraktion entsprechen. Wir haben die Konfiguration zum Zeichnen dieses Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Schauen wir uns also das vollständige Beispiel an.
Konfigurationen
Wir haben verwendet Table Klasse zum Anzeigen eines tabellenbasierten Diagramms.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Beispiel
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>Ergebnis
Überprüfen Sie das Ergebnis.