More than 5 years have passed since last update.

GoogleのgeoChart apiをReactに組み込んでみた

Last updated at 2017-08-08Posted at 2017-08-08

#初心者向け
(当方も初心者)
google visualizationの表示を既存のReactコードに組み込みたかったけど、いまいちapiの呼び出し方法がわからず、いろいろ調べた結果をまとめてみました。

##geochartのサンプルコード

sample.html

<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': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

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

##React化してみる
###まず、headerに
　　http://fb.me/react-0.13.3.jsと
　　http://fb.me/JSXTransformer-0.13.3.js

そして
　　apiのurlも追加

geochart.html

<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
  </body>
</html>

###スクリプトとして
　　api key,チャートデータ等をそのまま入力

geochart.html

<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load('current', {
        'packages':['geochart'],
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data, options);
      }
    </script>  
  </head>
  <body>
  </body>
</html>

###bodyにdivとReactを生成する

  <body>
    <div id="app"></div>

    <script type="text/jsx">
     var ChartMap = React.createClass({

       render: function() {
         return (
           <div id="regions_div">
           </div>
         );
       }
     });

//Reactをdivのid指定してレンダリング
     var m = React.render(<ChartMap />, document.getElementById('app'));
    </script>
  </body>

####　geochart.htmlをブラウザで開けばこのようになります

こんな感じでやりました。ただ、この記述だとES6で書かれていないので、jsとhtmlを分離してReactComponentで次回は記述していこうと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up