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

Googleのサービスに、JavaScriptのライブラリを利用して、グラフやチャートなどを描画できるGoogle Charts(グーグルチャート)があります。

今回は、そのGoogle Chartsを利用し、サイト内にグラフを表示する簡単な例となります。

Google Chartsを利用しグラフを表示する例

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

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':['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
			};

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

</script>

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

Google Chartsを利用したコードについて

以下、上記ソースコードの説明となります。

ライブラリローダーを読み込み

まず、Google Chartライブラリを利用するため、ライブラリローダーを読み込んでいます。

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

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

Google Chartライブラリを読み込み、グラフを描画する関数を実行

次に、利用するGoogle Chartライブラリを読み込み、その後にグラフを描画する関数を実行します。

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

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

Google Chartsのパッケージを読み込む方法

利用するGoogle Chartsのパッケージを読み込むには、google.charts.loadメソッドを利用します。メソッドの引数は以下となります。

第1引数は、バージョンを指定します。例のように 'current'を指定すると、最新の公式バージョンとなります。

第2引数は、ロードするGoogle Chartsのパッケージ設定をオブジェクトで指定します。パッケージの種類を指定するには、オブジェクトのキーを'packages'として値を配列で指定します。

例では、値を'corechart'と指定しています。'corechart'では基本的なグラフ・チャートを利用でき、棒・列・線・面積・階段状面積・バブル・パイ・ドーナツ・コンボ・ローソク足・ヒストグラム・散布図を描画できます。

また、第2引数のオブジェクトで指定できる設定は、その他にもあります。詳しくは文末の参考サイト内を確認してみてください。

グラフを描画する関数を実行する方法

グラフを描画する関数は、Google Chartsのパッケージを読み込んだ後に実行する必要があり、その方法はいくつかあります。

今回は、google.charts.loadメソッドが返すPromiseを利用しているため、thenメソッドの引数にグラフを描画する関数を指定し、関数を実行しています。

グラフの設定・描画を行う関数を作成

グラフの設定・描画を行う関数を作成します。

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

	// グラフの設定・描画を行う関数
	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
			};

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

グラフで利用するデータ・オプションを設定

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

グラフのデータの定義にはインスタンスのメソッドを利用します。グラフの種類によって指定するデータは異なり、例では、円グラフ用のデータを指定しています。

また、グラフにはオプションをオブジェクトで指定することもできます。例では、グラフのタイトル・高さ・幅をオプションで設定しています。

グラフのデータ・オプションを設定する方法の詳細は、以下のリンク先を参考にしてみてください。

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

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

例では、円グラフを描画するgoogle.visualization.PieChartクラスのインスタンスを作成し、引数にはidの属性値に'google_chart'をもつ要素にアクセスするメソッドを指定します。

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

グラフを表示するHTMLの要素を追加

グラフを表示するにはHTMLの要素を追加します。

例では、上記で設定したように、idの属性値に'google_chart'を持つ要素内にグラフを表示しています。

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

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

参考サイトなど

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

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

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