Wykresy Google - wykres tabelaryczny
Wykres tabelaryczny pomaga w renderowaniu tabeli, którą można sortować i stronicować. Komórki tabeli można formatować przy użyciu ciągów formatujących lub bezpośrednio wstawiając kod HTML jako wartości komórek. Wartości liczbowe są domyślnie wyrównane do prawej; wartości logiczne są wyświetlane jako znaczniki wyboru lub krzyżyki. Użytkownicy mogą wybierać pojedyncze rzędy za pomocą klawiatury lub myszy. Do sortowania można użyć nagłówków kolumn. Wiersz nagłówka pozostaje niezmieniony podczas przewijania. Tabela uruchamia zdarzenia odpowiadające interakcji użytkownika. Konfigurację używaną do rysowania tego wykresu widzieliśmy już w rozdziale Składnia konfiguracji wykresów Google . Zobaczmy więc pełny przykład.
Konfiguracje
Użyliśmy Table klasa, aby wyświetlić wykres oparty na tabeli.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Przykład
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>Wynik
Sprawdź wynik.