Google Chartで地図チャートを作成(日本地図と人口)

Google Chartで地図を使ったチャートを作成することができます。

googleChart1

「Google Chart API」を利用するとグラフが簡単に作成できる、という記事に書いたチャートの作成のための基本的な流れ(コード)は同じです。

地図を使ったチャートを表示するには、packagesでgeochartを設定。またオプション(var option)で日本の地図を使うために「region:’JP’」と設定して、また地図データの境界(都道府県単位)を設定するために「resolution: ‘provinces’」と設定します。

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

function graphChart() {
	var data = google.visualization.arrayToDataTable([
		['都道府県', '人口'],
		['東京', 13159388],
		['大阪', 8865245],
		['神奈川', 9048331],
		['愛知', 7410719],
		['福岡', 5071968],
		['北海道', 5506419],
		['埼玉', 7194556]
	]);

	var option = {
		region: 'JP',
		resolution: 'provinces'
	};

	var graph = new google.visualization.GeoChart(document.getElementById('drawChart'));
	graph.draw(data, option);
}
</script>

また、都道府県名を使わずに地域コードでデータ(var data)を設定することもできます。

['都道府県', '人口'],
['JP-13', 13159388],
['JP-27', 8865245],
['JP-14', 9048331],
['JP-23', 7410719],
['JP-40', 5071968],
['JP-01', 5506419],
['JP-11', 7194556]

「div id=”drawChart”」の場所に地図チャートを表示します。

<div id="drawChart" style="width:700px"></div>

コメントを残す

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