「Google Chart API」を利用するとグラフが簡単に作成できる

Google Chartを使うときには、JavaScriptを利用しますが、ある程度JavaScriptを知っていれば詳しくなくても簡単にグラフ(チャート)が作成できます。

googleChart

Google Chartの使い方

Google Chartには色々なチャートがありますけれど、利用するパッケージによって使うメソッドなどが変わりますが、ほとんど下のような流れで作成することができます。

1.最初のスクリプトタグで「https://www.google.com/jsapi」を設定することでGoogle Chartを利用できるようになります。

2.google.loadでチャートの種類によって読み込むパッケージを設定(例:corechart)

3.setOnLoadCallbackに適当な名前の関数を設定します。(例:graphChart)

4.関数を作成します。この関数の中で「google.visualization.arrayToDataTable」を使いデータを設定していきます。

5.データを設定したあと表示するHTMLタグを取得して、表示したいグラフ(例:google.visualization.PieChart)の引数に設定します。

6.グラフを設定したあとdrawメソッドの引数にデータを渡すとグラフを表示します。

※オプションの設定もありますが、チャートを作成する流れは以上です。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(graphChart);

function graphChart() {
	var data = google.visualization.arrayToDataTable([
		['都道府県', '人口'],
		['東京都', 13159388],
		['大阪府', 8865245],
		['神奈川県', 9048331],
		['愛知県', 7410719],
		['福岡県', 5071968],
		['北海道', 5506419],
		['埼玉県', 7194556]
	]);
	var graph = new google.visualization.PieChart(document.getElementById('enGraph'));
	graph.draw(data);
}
</script>
<div id="enGraph" style="width:500px"></div>

※上の例ですとチャートの表示範囲をstyleで設定していますが、チャートの表示の大きさなどの設定するのにオプションを使い、それをdrawメソッドに設定する方法もあります。

jQueryを使用した場合の例です。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
...
...
$(function() {
	var char = $('#enGraph');
	graph.draw(data);
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です