GoogleChartsでテーブルをグラフで表示する

投稿日  更新日

GoogleChartsのサンプルとデザイン周りで知らなくてハマったことです。

完成品

番号データ１データ2データ3
1102578401917
245225532115
3371619008972
463253017350
5491830514238
6127969006903
7992798597272
8817590257599
9850631088244
10651564529541

ソースコード

<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>

※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版のチャートを以下に示します。

参考

関連記事

コメント: 0

コメントを書く