GoogleChartsでテーブルをグラフで表示する
GoogleChartsのサンプルとデザイン周りで知らなくてハマったことです。
完成品
| 番号 | データ１ | データ2 | データ3 |
|---|---|---|---|
| 1 | 1025 | 7840 | 1917 |
| 2 | 452 | 2553 | 2115 |
| 3 | 3716 | 1900 | 8972 |
| 4 | 632 | 5301 | 7350 |
| 5 | 4918 | 3051 | 4238 |
| 6 | 1279 | 6900 | 6903 |
| 7 | 9927 | 9859 | 7272 |
| 8 | 8175 | 9025 | 7599 |
| 9 | 8506 | 3108 | 8244 |
| 10 | 6515 | 6452 | 9541 |
ソースコード
チャート描画部分<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {"packages":["line"]});
google.charts.setOnLoadCallback(function() {
const tableid = "test-table";
// テーブルヘッダ取得
let thead = [];
let thds = document.querySelectorAll('table#'+tableid+' thead tr th');
for (let c=0; c<thds.length; c++) {
thead.push(thds[c].innerText);
}
// テーブルデータ取得
let tdata = [];
let trs = document.querySelectorAll('table#'+tableid+' tbody tr')
for (let r=0; r<trs.length; r++) {
let row = [];
let tds = trs[r].querySelectorAll('td');
// 1列を文字列、それ以外を数値として取得する
row.push(tds[0].innerText);
for (let c=1; c<tds.length; c++) {
row.push(tds[c].innerText-0);
}
tdata.push(row);
}
// チャート描画
let data = new google.visualization.DataTable();
data.addColumn("string", thead[0]);
for (let i=1; i<thead.length; i++) {
data.addColumn("number", thead[i]);
}
data.addRows(tdata);
let options = {
width: "100%",
height: 200
};
let chart = new google.charts.Line(document.getElementById('test-chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
});
</script>
<div id="test-chart"></div>テーブル部分<table id="test-table">
<thead>
<tr><th>番号</th><th>データ１</th><th>データ2</th><th>データ3</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>1025</td><td>7840</td><td>1917</td></tr>
<tr><td>2</td><td>452</td><td>2553</td><td>2115</td></tr>
<tr><td>3</td><td>3716</td><td>1900</td><td>8972</td></tr>
<tr><td>4</td><td>632</td><td>5301</td><td>7350</td></tr>
<tr><td>5</td><td>4918</td><td>3051</td><td>4238</td></tr>
<tr><td>6</td><td>1279</td><td>6900</td><td>6903</td></tr>
<tr><td>7</td><td>9927</td><td>9859</td><td>7272</td></tr>
<tr><td>8</td><td>8175</td><td>9025</td><td>7599</td></tr>
<tr><td>9</td><td>8506</td><td>3108</td><td>8244</td></tr>
<tr><td>10</td><td>6515</td><td>6452</td><td>9541</td></tr>
</tbody>
</table>覚書
GoogleChartsには、Material版とClassic版がある。
Material版は、綺麗なよりよいチャートを表示するが、チャートの細部を変更するオプションが多数機能しない。
Classic版は、多彩なオプションを使用できるが、美しいチャートを作成したい場合、多数のオプション設定とデザインセンスが必要となる。（ウェブ上でGoogleChartsのオプションの話をしている場合、大抵はこっちの話をしている）
Material版とClassic版の主な違いは、ロードとクラスとオプションの指定方法が違います。例を次に示します。
Material版 google.charts.load("current", {"packages":["line"]});
...
var chart = new google.charts.Line(document.getElementById('test-chart'));
chart.draw(data, google.charts.Line.convertOptions(options));Classic版 google.charts.load("current", {"packages":["corechart"]});
...
var chart = new google.visualization.LineChart(document.getElementById('test-chart'));
chart.draw(data, options);完成品として表示しているものは、Material版となります。比較用としてMaterial版とClassic版のチャートを以下に示します。