GoogleChartで世界地図を色分け表示してみた


Google Chart ToolsのGeoChartでJavaScriptでサクッと世界地図グラフを描画できます。

まずは地図を描画するエリアをHTMLで定義します。

body

<div id="visualization" style="width:1000px; height:700px"></div>

headに以下を追加します。

head

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

onloadあたりに初期化コードを書きます。

google.load('visualization', '1', {packages: ['geochart']});
google.setOnLoadCallback(draw);

国ごとの色分けの元データを定義。これもonloadあたりで。

var records = [
    {name: 'JP', score: 100},
    ...
];

そしてグラフ描画関数を定義。

draw

function draw() {
    // テーブルの定義
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', '国');
    dataTable.addColumn('number', 'なにかの値');
    // データをテーブルに追加
    for (var i = 0; i < records.length; i++) {
        var rec = records[i];
        dataTable.addRow([rec.name, rec.score]);
    }
    // チャートの定義
    var map = new google.visualization.GeoChart(document.getElementById('visualization'));
    // チャートにテーブルのデータを描画！
    map.draw(dataTable, {
      width: 1200,
      height: 700,
      colorAxis: {colors: ['white', 'blue']}
    });
}

とっても簡単！

GeoChartを使って作ってみました。
海外渡航情報 危険度マップ