【Cocoon/WordPress】手軽にグラフを書いてみる(応用編1)

グラフを描くサービス
Photo by Stephen Dawson on Unsplash

以前、Wordpress/Cocoonでブログを書いているページで、グラフを描いてみましょうという記事を書きました。

準備編と実践編の2回に分けて、ご紹介したかと思います。

【Cocoon/WordPress】手軽にグラフを書いてみる(準備編)
Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。 プログラム初心者の方にもとても有意義かなと思います。
【Cocoon/WordPress】手軽にグラフを書いてみる(実践編)
Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。 プログラム初心者の方にもとても有意義かなと思います。

前回の実践編は、折れ線的なグラフでしたが、今回は地図を使ったグラフを WordPress/Cocoonなサイトで描く方法をご紹介しますね。

考え方

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

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

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

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

コード

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

【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をいれましょう。

<div id="geo_map-div"></div>

初心者さんへ

どうぞ、javascript内のvalue_dataの値を変えるところから改造してみてください。
あとは、Color といってるところとか、whiteとかblueとか。
何か変えてみたら、どうなりそうか検討つきますかね?

応用ききますよ。
是非、下記の記事を参考にして、色々やってみてください。

【プログラム初心者さん必見】初心者がする勉強の仕方はこれ
4月からの新人さんを多くみてきた私が思うんですが、プログラム初心者さんは勉強する意欲はあるんですよね。でも、その方向を間違うと、「あー、プログラムってめんどくさい」とか「いらいらする」とかの塊になってしまいます。今日は、そんな間違いをしないためのちょっとした秘訣をお伝えします。

コメント

タイトルとURLをコピーしました