csv形式のデータをグラフ化し、地図上に重畳できます。単数グラフの場合はマーカをクリックするとグラフが表示されます。
グラフを重畳するにはZDC.Graphクラスを利用します。
表示データの例(graph_data.csv)
駅名,緯度,経度,徒歩,路線バス,自転車,タクシー,乗用車,軽乗用車,その他 新松戸,35.82442,139.92081,100,100,100,100,100,100,100 新宿西口,35.69382,139.69901,200,300,516,188,222,62,337 品川シーサイド,35.61068,139.74996,300,200,126,312,188,222,62 光が丘,35.75848,139.62997,378,300,200,126,312,188,222 航空公園,35.79774,139.46627,126,378,300,200,126,312,188 草加,35.82762,139.80339,516,188,378,300,200,126,312 八王子,35.65527,139.3401,222,516,188,378,300,200,126 あざみ野,35.56805,139.55354,312,337,516,188,378,300,200 小田急永山,35.62959,139.44916,62,312,337,516,188,378,300 東京ディズニーランド,35.6357,139.87802,501,62,312,337,516,188,378
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,userwidget.js,shape.js&force=1" type="text/javascript"></script>
<!-- 取得したgraph.jsを別途インクルードする -->
<script type="text/javascript" src="graph-1.0.js"></script>
<script type="text/javascript">
//<![CDATA[
var graph;
function loadMap() {
var map = new ZDC.Map(
document.getElementById('ZMap'), {zoom:5 }
);
var options = {
data: {
dataUrl: "graph_data.csv",
datum: 'WGS84' // 取り込むcsvデータが世界測地系のためWGS84を指定する
},
graph: {
clickable: true // マーカをクリックすることでグラフを表示する
}
};
graph = new ZDC.Graph(map, options);
}
/* セレクトボックスで選択された値に応じてグラフを変更する */
function changeGraph(arg) {
var options = {};
options.graph = {};
var type = arg.value;
if (type === 'single') {
// マーカをクリックすることでグラフを表示する
options.graph.clickable = true;
} else if (type === 'multiple') {
// 複数のグラフを表示する
options.graph.clickable = false;
}
graph.setOptions(options);
graph.redraw();
}
//]]>
</script>
</head>
<body onload="loadMap();">
<select id="select-graph" style="left: 20px; position: absolute; z-index: 100" onchange="changeGraph(this)">
<option value="single">単数グラフ</option>
<option value="multiple">複数グラフ</option>
</select>
<div id="ZMap" style="border:1px solid #777777; width:650px; height:300px; top:0px; left:20px; position:absolute;">
</div>
</body>
</html>