【Google Charts】縦棒グラフを描画する例|データ・オプションの設定方法

今回は、Google Charts(グーグルチャート)を利用し、縦棒グラフを描画する例となり、縦棒グラフのデータやオプションを設定する方法となります。

【Google Charts】縦棒グラフを描画する例

例では、Google Chartsを利用して、次のような2つの要素をもつ縦棒グラフを作成しています。また、グラフのデザインはマテリアルデザインのバージョンとなります。

Google Chart を利用して作成したマテリアルデザインの縦棒グラフ

以下、グラフを作成するソースコードの例となり、HTMLファイルに記述します。

また、ライブラリローダーの読み込み・スクリプトの部分は、bodyの最後に追加しても機能します。

<!-- ライブラリローダーを読み込み -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

	// 利用するGoogle Chartsのパッケージをロード後、グラフを描画する関数を呼び出し
	google.charts.load(
		'current',
		 {'packages':['bar']}
	)
	.then(drawChart);

	// グラフの設定・描画を行う関数
	function drawChart() {
		// グラフのデータを設定するインスタンスを作成
		var data = new google.visualization.DataTable();
		data.addColumn('string');
		data.addColumn('number', '田中');
		data.addColumn('number', '山根');

		data.addRows([
			["2020-01", 14, 28],
			["2020-02", 16, 20],
			["2020-03", 31, 15]
		]);

		// グラフのオプションを設定
		var options = {
			title: '縦棒グラフの例',
			width:400,
			height:300,
			hAxis: {
				title: '年-月',
			},
			vAxis: {
				title: '売上',
				format:'#万円',
			},
		};

		// グラフを描画するためのインスタンスを作成
		var chart = new google.charts.Bar(document.getElementById('google_chart'));
		// グラフにデータ・オプションをセットして描画
		chart.draw(data, google.charts.Bar.convertOptions(options));
	}

</script>

<!-- グラフを表示 -->
<div id="google_chart"></div>

マテリアルデザインの縦棒グラフを利用する場合

Google Chartsでは利用するグラフ・チャートによって、パッケージをロードします。

上記ソースコードでは6行目からの次の箇所となります。

	// 利用するGoogle Chartsのパッケージをロード後、グラフを描画する関数を呼び出し
	google.charts.load(
		'current',
		 {'packages':['bar']}
	)
	.then(drawChart);

例では、マテリアルデザインの縦棒グラフを利用できるbarのパッケージをロードしています。

また、Google Chartsの基本的な利用方法については、以下のリンク先を参考にしてみてください。

縦棒グラフを描画する関数について

以下は、例のソースコードの中で、棒グラフを描画する関数の箇所についての説明となります。

棒グラフのデータを設定

グラフで利用するデータを設定する方法はいくつかありますが、今回はgoogle.visualization.DataTableクラスのインスタンスを利用しています。

上記ソースコードでは15行目からの次の箇所となります。

		// グラフのデータを設定するインスタンスを作成
		var data = new google.visualization.DataTable();
		data.addColumn('string');
		data.addColumn('number', '田中');
		data.addColumn('number', '山根');

		data.addRows([
			["2020-01", 14, 28],
			["2020-02", 16, 20],
			["2020-03", 31, 15]
		]);

グラフのデータの設定にはインスタンスのメソッドを利用します。また、グラフのデータはテーブルとなり、グラフの種類によって指定するデータが異なります。

例の縦棒グラフの場合、カラムの設定を行うaddColumnメソッドと、レコードのデータを設定するaddRowsメソッドを、次のように指定しています。

addColumnメソッド

最初のaddColumnメソッドの引数には'string'を指定します。それにより、このカラムの値には文字列を入れることができ、縦棒グラフの横軸の項目が入ります。

次のaddColumnメソッドの第1引数には'number'を指定します。それにより、このカラムの値は数値となり、縦棒グラフの1つ目の要素の値が入ります。

次のaddColumnメソッドの第1引数には'number'を指定します。それにより、このカラムの値は数値となり、縦棒グラフの2つ目の要素の値が入ります。

上記のaddColumnメソッドの場合、第2引数にカラムのラベル、第3引数にカラムを識別するidを指定できます。

また、addColumnメソッドは、その他の方法でデータの指定もできます。詳しくは文末の参考サイト内を確認してみてください。

addRowsメソッド

addRowsメソッドの引数を2次元配列で指定します。内側の配列がレコードごとのデータとなり、順番に「横軸の項目」「1つ目の要素の値」「2つ目の要素の値」を指定します。

縦棒グラフのデータ例

今回の例の場合、インスタンスで設定したデータは次のようなテーブルとなり、縦棒グラフで利用するデータを表します。

0(インデックス)
string(データ)
1(インデックス)
number(タイプ)
田中(ラベル)
2(インデックス)
number(タイプ)
山根(ラベル)
2020-011428
2020-021620
2020-033115

縦棒グラフのオプションを設定

グラフはオプションをオブジェクトで指定できます。

上記ソースコードでは27行目からの次の箇所となります。

		// グラフのオプションを設定
		var options = {
			title: '縦棒グラフの例',
			width:400,
			height:300,
			hAxis: {
				title: '年-月',
			},
			vAxis: {
				title: '売上',
				format:'#万円',
			},
		};

例では、次の縦棒グラフのオプションを設定しています。

キー
title
グラフに表示するタイトル
width
グラフを表示する要素の横幅
height
グラフを表示する要素の高さ
hAxis.title
横軸のラベル
vAxis.title縦軸のラベル
vAxis.format
縦軸の値をフォーマット。#を指定すると値に置換

また、barパッケージで縦棒グラフを描画する場合、利用できないオプションもあります。オプションの指定方法の詳細や、その他のオプションについては、文末の参考サイト内を確認してみてください。

縦棒グラフを描画するためのインスタンスを作成

barパッケージでの縦棒グラフを描画は、google.charts.Barクラスのインスタンスを作成し、drawメソッドで行います。

上記ソースコードでは41行目からの次の箇所となります。

		// グラフを描画するためのインスタンスを作成
		var chart = new google.charts.Bar(document.getElementById('google_chart'));
		// グラフにデータ・オプションをセットして描画
		chart.draw(data, google.charts.Bar.convertOptions(options));

作成したインスタンスの引数は、グラフを表示するHTML要素を指定するため、要素にアクセスするメソッドとなります。

例では引数にはidの属性値に'google_chart'をもつ要素にアクセスするメソッドを指定します。

そして、グラフの描画はインスタンスのdrawメソッドで行います。その際に、drawメソッドの第1引数にグラフのデータを指定します。

第2引数にはgoogle.charts.Bar.convertOptionsメソッドで引数にオプションを指定します。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。