Google Charts - Grafico da tavolo
Il grafico a tabella aiuta a rendere una tabella che può essere ordinata e impaginata. Le celle della tabella possono essere formattate utilizzando stringhe di formato o inserendo direttamente HTML come valori di cella. I valori numerici sono allineati a destra per impostazione predefinita; i valori booleani vengono visualizzati come segni di spunta o crocette. Gli utenti possono selezionare singole righe con la tastiera o il mouse. Le intestazioni di colonna possono essere utilizzate per l'ordinamento. La riga di intestazione rimane fissa durante lo scorrimento. La tabella genera eventi corrispondenti all'interazione dell'utente. Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Google Charts . Quindi, vediamo l'esempio completo.
Configurazioni
Noi abbiamo usato Table class per mostrare il grafico basato sulla tabella.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Esempio
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>Risultato
Verifica il risultato.