Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

海外渡航情報 危険度マップ

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を使って作ってみました。
海外渡航情報 危険度マップ

yuch_i
SET・フロントエンド・バックエンド・QA。DMAIC & TDD信者。
https://www.bluegreen.company
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away