ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

投稿日：2021年4月14日

Table of Contents

公式サイト

https://developers.google.com/chart

サンプルコード

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Num');

      data.addRows([ [0, 0],   [1, 10],  [2, 20],  [3, 30] ]);

      var options = {
        hAxis: {
          title: 'X'
        },
        vAxis: {
          title: 'Y'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

必要なjsファイルを読み込み（3行目）

必要なライブラリの読み込み（5行目）

google.charts.loadの第一引数には読み込みバージョン名、またはバージョン番号を指定します。
ここでは最新バージョンの’current’を指定しています。

第二引数には読み込むパッケージの配列を渡します。

API読み込み完了後に実行するコールバック関数を設定（6行目）

google.charts.setOnLoadCallback関数の引数にチャートの設定や描画を行う関数を渡します。

チャートのデータを用意

https://developers.google.com/chart/interactive/docs/basic_preparing_data

チャートを生成

ここでは折れ線グラフを描画するため、google.visualization.LineChart関数に描画先の要素を渡し、チャートを生成します。

チャートを描画

chart.draw関数に設定したデータとオプションを渡すと、チャートが描画されます。