コスパ重視で生きたい人生だった

なるべく楽して生きて行きたい30代サラリーマンのブログ

GoogleChartで日本地図に色を塗ってみた

f:id:dett0826:20160116173559j:plain
先日の記事で使用した日本地図に色をつけたやつ。
GoogleChartのAPIを利用しました。

備忘録的に使い方をメモ。
誰かの役に立てば。

www.cospa14.com

GoogleChartで地図を作成し、色を塗る

よく社会の教科書でみるような、地域ごとの人口によって色分けしたり、とか、そういうのができます。

上の記事で使った日本地図は、以下のコードにて実現。

<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([
    ['都道府県', '世界遺産数'],
['奈良',3],
['岩手',2],
['静岡',2],
['広島',2],
(以下省略)
  ]); 
        var option = {
          region: 'JP', 
          resolution: 'provinces'
        }; 
  var graph = new google.visualization.GeoChart(document.getElementById('drawChart'));
  graph.draw(data, option);
}</script>
<div id="drawChart" style="width:500px"></div>
地図の色を変えたいときはcolorAxis

地図の色(今回で言えばグレー~緑)を別の色にしたいときには、以下をoptionの中に記述してください。
開始の色と終わりの色の最低2色を指定する必要がありますが、3色以上指定も可能です。

colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
世界地図も使える

今回は regionでJPを指定していますが、これを指定しなければ世界地図になります。

県単位の指定はresolution

日本を県単位で塗り分けるためにresolutionでprovinceを指定しています。

他にもいろいろオプションがあるので、以下の公式ガイドにてご確認を。

公式のガイドはこちら

Visualization: GeoChart  |  Charts  |  Google Developers