Google의 geoChart api를 React에 통합해 보았습니다.

초보자용

(우리 쪽도 초보자)
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>

인용원
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 짱 rt / 인테라 c 치ゔ / cs / ぇ ry / 게오 챠 rt

React화해보기

먼저 헤더에게

http://fb.me/react-0.13.3.jshttp://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로 다음번은 기술해 가려고 생각합니다.

Reference

이 문제에 관하여(Google의 geoChart api를 React에 통합해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/cellright/items/6578f7864ab5e73cd0a8

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다