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

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

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

例では、Google Chartsを利用して次のような円グラフを作成しています。

以下、グラフを作成するソースコードの例となり、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':['corechart']}
	)
	.then(drawChart);

	// グラフの設定・描画を行う関数
	function drawChart() {
		// グラフのデータを設定するインスタンスを作成
		var data = new google.visualization.DataTable();
		data.addColumn('string');
		data.addColumn('number');
		data.addRows([
			['玉ねぎ', 4],
			['イカ', 2.5],
			['アサリ', 2.5],
			['ユビ', 1]
		]);

		// グラフのオプションを設定
		var options = {
				'title':'【ピザ服部】シーフードピザのトッピング割合',
				'width':400,
				'height':300,
				'is3D': true
			};

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

</script>

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

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

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

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

【Google Chartsの利用方法】グラフ・チャートを表示する方法

円グラフのデータを設定

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

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

		// グラフのデータを設定するインスタンスを作成
		var data = new google.visualization.DataTable();
		data.addColumn('string');
		data.addColumn('number');
		data.addRows([
			['玉ねぎ', 4],
			['イカ', 2.5],
			['アサリ', 2.5],
			['ユビ', 1]
		]);

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

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

addColumnメソッド

最初のaddColumnメソッドの引数には'string'を指定します。それにより、このカラムの値には文字列を入れることができ、円グラフの構成要素の名前が入ります。

次のaddColumnメソッドの引数には'number'を指定します。それにより、このカラムの値には数値を入れることができ、円グラフの構成要素の割合が入ります。

上記の場合、第2引数にカラムのラベル、第3引数にカラムを識別するidを指定することもできます。

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

addRowsメソッド

addRowsメソッドの引数をMapで指定し、キーには円グラフの構成要素の名前、値には円グラフの構成要素の割合を指定し、フィールドのデータを設定します。

円グラフのデータ例

今回の例の場合、インスタンスで設定したデータは次のようなテーブルとなり、円グラフの構成要素を表します。

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

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

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

		// グラフのオプションを設定
		var options = {
				'title':'【ピザ服部】シーフードピザのトッピング割合',
				'width':400,
				'height':300,
				'is3D': true
			};

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

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

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

円グラフを描画は、google.visualization.PieChartクラスのインスタンスを作成し、drawメソッドで行います。

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

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

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

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

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