日本地図を都道府県で表示【Google Charts入門】

GeoJAPAN

Google Chartを使って、日本地図を都道府県で表示する方法のご紹介です。

GeoChartとは?【Google Charts】

https://developers.google.com/chart/interactive/docs/gallery/geochart

国の地図、大陸、下記3つのどれかの方法で特定されたエリア。

  • 【region mode】
    大陸、州のような地域全体をカラーリング。
  • 【markers mode】
    指定した値に応じてスケーリングされる指名領域に円を使用。
  • 【text mode】
    識別子「ロシア」または「アジア」など地域にラベル。

GeoChartは、SVGまたはVML使用してブラウザー内でレンダリングされます 。

スクロールやドラッグができず、地形図ではなく線画であることに注意してください。必要な場合は、代わりにマップの可視化を検討ください 。

Google Chartsサンプルソース

下記が、地図のサンプルをカスタマイズしたものをです。

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: you will need to get a mapsApiKey for your project.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': '*******'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
      ['都道府県', '坪単価平均'],
      ['大阪', 1215186],
      ['京都', 729900],
      ['兵庫', 491799],
      ['奈良', 237718],
      ['滋賀', 160000],
      ['和歌山', 151311],
      ['三重', 123898]
      ]);

      var options = {
           title: "関西地方の都道府県の基準地価 - 2020年",
           width: 600,
           height: 400,
           region: 'JP',
           resolution: 'provinces',
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

HTML

HTML上でグラフを描画したい場所に、id名を指定します。

例:chart_div

JavaScript

チャートライブラリの読み込み

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

GoogleのCDNからチャートライブラリを読み込みます。

パッケージのロードと、コールバックの指定

// Visualization APIと、corechartパッケージをロードする
// Google Chartのpackages(['corechart'])を指定
google.charts.load('current', {'packages':['corechart']});

// ロード時のコールバックを"drawChart"に指定
google.charts.setOnLoadCallback(drawChart);

google.charts.load() で使いたいパッケージをロードします。

今回はコアパッケージのcorechartを使いたいので、指定します。

google.charts.setOnLoadCallback( ) でコールバック関数名を指定します。

コールバック関数の指定

   // コールバック関数
   // データテーブル、チャートのオプション設定、チャート描画
      function drawChart() {

        :
      }

コールバック関数、今回はdrawChart()を宣言していきます。

データテーブルの作成

折れ線グラフで使う、配当金の年間データをJSON形式で指定していきます。

      var data = google.visualization.arrayToDataTable([
      ['都道府県', '坪単価平均'],
      ['大阪', 1215186],
      ['京都', 729900],
      ['兵庫', 491799],
      ['奈良', 237718],
      ['滋賀', 160000],
      ['和歌山', 151311],
      ['三重', 123898]
      ]);
.DataTable()2次元の変更可能な値のテーブルを表します。
.addColumn()テーブルの形式
.addRows()データの追加

チャートのオプション設定

タイトルやサイズなどオプション指定をしていきます。

    var options = {
           title: "関西地方の都道府県の基準地価 - 2020年",
           width: 600,
           height: 400,
           region: 'JP',
           resolution: 'provinces',
      };
title:タイトル
legend:チャートの「凡例」の表示位置
width:600描画領域の横幅
height:480描画領域の縦幅
region:地域
resolution: 都道府県など

これで日本地図を描画することができます。

応用:日本地図の色を変更

options の指定でカラー変更することができます。

var options = {
           backgroundColor: '#333',
           colorAxis: {colors: ['#ff6347', '#dc143c']}
      };

まとめ

手軽にJavaScriptで豊富なグラフやチャート描画を選ぶことができる「Google Charts」のご紹介でした。

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA