GoogleChartsのサンプルとデザイン周りで知らなくてハマったことです。
完成品
番号 | データ1 | データ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>データ1</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>
※Markdownの都合上ページのソースコードとは一部異なります
覚書
GoogleChartsには、Material版とClassic版がある。
Material版は、綺麗なよりよいチャートを表示するが、チャートの細部を変更するオプションが多数機能しない。
Classic版は、多彩なオプションを使用できるが、美しいチャートを作成したい場合、多数のオプション設定とデザインセンスが必要となる。(Web上でGoogleChartsのオプションの話をしている場合、大抵はこっちの話をしています)
Material版とClassic版の主な違い(ロードとクラスとオプションの指定方法が違う)は下記の通りです。
google.charts.load("current", {"packages":["line"]}); ... var chart = new google.charts.Line(document.getElementById('test-chart')); chart.draw(data, google.charts.Line.convertOptions(options));
google.charts.load("current", {"packages":["corechart"]}); ... var chart = new google.visualization.LineChart(document.getElementById('test-chart')); chart.draw(data, options);
完成品として表示しているものは、Material版となります。比較用としてMaterial版とClassic版のチャートを以下に示します。
参考
- Line Chart | Charts | Google Developers
- Material版に欠けている機能一覧
コメント: 0