考え方

javascriptを使って、csv的なデータを、グラフ描画エンジンに与えてあげるという流れです。

csv的なデータとは、こんな感じのデータです。

[“都道府県”,”数”],
[“東京”,10],
[“埼玉”,20],

と、データを作って、それをグラフ描画エンジンに与えるだけです。

Amazonで詳細を見る

コード

コードを書く場所は、実践編で紹介した場所です。

【Cocoon/WordPress】手軽にグラフを書いてみる(実践編）

Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。プログラム初心者の方にもとても有意義かなと思います。

そこに、こんなコードを書いてみました。

var script = document.createElement("script");
script.src = "https://www.gstatic.com/charts/loader.js";
var head = document.getElementsByTagName("head");
head[0].appendChild(script);

script.onload = function(){
	google.charts.load('current', {	'packages':['geochart']	});
	google.charts.setOnLoadCallback(geoMapDrawing);

	function geoMapDrawing() {
		var value_data = [
		    ["都道府県","分布数"],
			["埼玉",15],
			["千葉",19],
			["東京",100],
			["神奈川",25],
			["大阪",27],
			["兵庫",17],
			["福岡",15],
			["北海道",25],
			["茨城",6],
			["石川",5],
			["岐阜",7],
			["愛知",30],
			["京都",7],
			["青森",0],
			["岩手",0],
			["宮城",0],
			["秋田",0],
			["山形",0],
			["福島",0],
			["栃木",0],
			["群馬",9],
			["新潟",0],
			["富山",3],
			["福井",5],
			["山梨",0],
			["長野",0],
			["静岡",0],
			["三重",1],
			["滋賀",1],
			["奈良",1],
			["和歌山",1],
			["鳥取",0],
			["島根",0],
			["岡山",0],
			["広島",1],
			["山口",0],
			["徳島",0],
			["香川",0],
			["愛媛",3],
			["高知",2],
			["佐賀",0],
			["長崎",1],
			["熊本",1],
			["大分",1],
			["宮崎",0],
			["鹿児島",0],
			["沖縄",4],
		];
		var dset = google.visualization.arrayToDataTable(value_data);
		var options = {
			region: 'JP', displayMode: 'regions',backgroundColor: '#f0f0f0',resolution: 'provinces',colors:['white','blue']
		};
		var chart = new google.visualization.GeoChart(document.getElementById('geo_map-div'));
		chart.draw(dset, options);
	}

};

そして、記事の「文面」に、下記のHTMLをいれましょう。