Google Chartsで簡単にグラフを描く | トンボのようにまっすぐ進んでいたい

Google ChartsはGoogleが無償で提供しているchartライブラリです。
とても簡単に使えるので、ちょっとデータを可視化してみたい時にも便利です。

Contents

1 Google Chartsで使えるグラフの種類
2 Google Chartsの使い方
3 Google Chartsの詳細設定
- 3.1 データの設定
- 3.2 オプションの設定

Google Chartsで使えるグラフの種類

Google Chartsにはあらゆるグラフ形式が標準で用意されています。
代表的なものはだいたいサポートされています。

Area chart(面グラフ)
Bar chart(横棒グラフ)
Column chart(縦棒グラフ)
Bubble chart(バブルチャート)
Line chart(折れ線グラフ)
Pie chart(円グラフ)
Histogram(ヒストグラム)
Combo chart(線グラフ+縦棒グラフ)

などなど

Google Chartsの使い方

ライブラリの読み込み

以下のタグを<head>タグに埋め込むだけで使えます。

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

グラフの実装例(円グラフ)

以下のように、ほんの少しの記述でリッチなグラフが描けます。
カスタマイズオプションも豊富なので、自分の思い通りに見せ方を調整することもできます。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']})
      google.charts.setOnLoadCallback(() => {
        const data = google.visualization.arrayToDataTable([
          ['Topping', 'Slices'],
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ])

        const options = {
          title: 'How Much Pizza I Ate Last Night',
          width: 400,
          height: 300
        }

        const chart = new google.visualization.PieChart(document.getElementById('chart_div'))
        chart.draw(data, options)
      })
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

そのほかにもいろんな種類のグラフが書けます。
グラフの内容はグラフギャラリーから抜粋しているので、コードをコピーして試してみると面白いと思いますよ。

グラフサンプル

出典：Google Charts グラフギャラリー

Google Chartsの詳細設定

データの設定

描画するデータは配列で用意し、arrayToDataTableメソッドでDataTableクラスのオブジェクトに変換します。

先頭の配列にはカラム名を追加します。

var data = google.visualization.arrayToDataTable([
  ['Topping', 'Slices'],
  ['Mushrooms', 3],
  ['Onions', 1],
  ['Olives', 1],
  ['Zucchini', 1],
  ['Pepperoni', 2]
])

以下のようにcolumnやrowごとに追加することもできます。

var data = new google.visualization.DataTable();

// columnを追加
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');

// データを追加
data.addRows([
  ['Mushrooms', 3],
  ['Onions', 1],
  ['Olives', 1],
  ['Zucchini', 1],
  ['Pepperoni', 2]
])

オプションの設定

2軸以上あるグラフ

縦軸が2軸以上ある場合は、増えた軸の数だけデータ配列の要素を増やします。
2軸の場合は配列の要素数は3つになります。

data.addColumn('date', '年')
data.addColumn('number', '出生数')
data.addColumn('number', '合計特殊出生率')
data.addRows([
  [new Date(1950, 1, 1), 2337507, 3.65],
  [new Date(1951, 1, 1), 2137689, 3.26],
  [new Date(1952, 1, 1), 2005162, 2.98],
  [new Date(1953, 1, 1), 1868040, 2.69],
  [new Date(1954, 1, 1), 1769580, 2.48],
  ...
])

各軸の表示設定は、オプションのvAxesで指定します。

seriesでグラフのタイプとインデックスを指定し、対応するオプションをvAxesの対応するインデックスで指定します。

vAxes: {
  0: {
    title: '出生数',
    viewWindow: { min: 0, max: 2500000 }
  },
  1: {
    title: '合計特殊出生率',
    titleTextStyle: { color: 'red' },
    viewWindow: { min: 0, max: 5 },
  }
},
series: {
  0: { type: 'bars', targetAxisIndex: 0 },
  1: { type: 'line', targetAxisIndex: 1 }
}

出典：厚生労働省出生数、合計特殊出生率の推移

このグラフの例ではtitleTextStyleで軸タイトルのスタイルを調整し、viewWindowで表示する範囲をカスタマイズしています。

軸の書式形式

軸のラベル書式はhAxis.formatまたはvAxis.formatで定義します。

format: { 'none' } // 数値を書式設定せずに表示する(8,000,000)
format: { 'decimal' } // 数値を千桁区切りで表示する(8000000)
format: { 'scientific' } //数値を科学的表記で表示する(8e6)
format: { 'currency' } //数値を現地通過で表示する(8,000,000ドル)
format: { 'percent' } // 数値をパーセンテージで表示する(8,000,000%)
format: { 'short' } // 短縮番号を表示する(800万)
format: { 'long' } // 数値を完全な単語として表示する(800万)

format: { 'YYYY年mm月dd日' }　// データがJavaScriptのDateオブジェクトの場合 例：2020年3月19日

下のセレクトボックスの項目を変更すると、vAxisの数値形式が対応したものに切り替わります。
表示がどのように変化するか確認してみてください。

vAxis: { format: 'decimal' }

軸のスケール

軸のスケール設定はvAxis.scaleTypeまたはhAxis.scaleTypeで定義します。

scaleType: 'liear' // 線形スケール
scaleType: 'log' // ログスケール
scaleType: 'mirrorLog' // 負の範囲も鏡面でログスケール表示

vAxis: { scaleType: 'mirrorLog' }