グラフを表示する

実行結果

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="//d3js.org/d3.v3.min.js"></script>
    <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,userwidget.js,shape.js" type="text/javascript"></script>
    <!-- 取得したgraph.jsを別途インクルードする -->
    <script type="text/javascript" src="graph-1.0.js"></script>
    <script type="text/javascript">

        var graph;

        function loadMap() {
            var map = new ZDC.Map(
                    document.getElementById('ZMap'), {
                        zoom:5,
                        mapType: ZDC.MAPTYPE_HIGHRES_LV18
                    }
            );
            var options = {
                data: {
                    dataUrl: "graph_data.csv",
                    datum:  'WGS84' // 取り込むcsvデータが世界測地系のためWGS84を指定する
                },
                graph: {
                    clickable: true // マーカをクリックすることでグラフを表示する
                }
            };
            graph = new ZDC.Graph(map, options);

            map.addWidget(new ZDC.ScaleBar());
            map.addWidget(new ZDC.Control());
        }

        /* セレクトボックスで選択された値に応じてグラフを変更する */
        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="top:0px; 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:750px; height:500px; top:0px; left:20px; position:absolute;">
</div>
</body>
</html>