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

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

【Google Charts】縦棒グラフを描画する例（マテリアルデザイン）

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

以下、グラフを作成するソースコードの例となり、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 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つ目の要素の値」を指定します。

縦棒グラフのデータ例

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

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

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

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

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

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

マテリアルデザインのオプションについて

corechart のパッケージで利用するチャートのオプションが、マテリアルデザインのチャートでは、利用できない場合があります。

オプションの指定方法の詳細や、その他のオプションについては、文末の参考サイト内を確認してみてください。

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

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メソッドで引数にオプションを指定します。