初心者向け
(当方も初心者)
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で次回は記述していこうと思います。