2

nvd3.jsライブラリを使用して、 jQuerys関数または関数stackedAreaChartを使用してWebサービスからフェッチされたデータを使用してを作成する際に問題が発生します。Webサービスからデータを取得していますが、グラフにデータを取得できません。静的データを試してみましたが、これは機能しますが、またはを使用すると問題が発生します。$.getJSONd3.json$.getJSONd3.json

私は何が間違っているのですか？そして、これを行うためのより良い方法はありますか？グラフィックを作成するための（データの傾向を示すための）より良いフレームワークはありますか？これに関する優れたリソースを見つけることができないので、助けてくれてありがとう！:)

<script>
var chart;
var data = [{
    "key": "HTTP 200",
    "values": getData()
}];
setupGraph();

    function setupGraph() {

        nv.addGraph(function() {

            chart = nv.models.stackedAreaChart()
                    .x(function(d) { return d[0] })
                    .y(function(d) { return d[1]/100 })
                    .color(d3.scale.category10().range())
                    .clipEdge(false);

            chart.xAxis
                .tickFormat(function(d) {
                    return d3.time.format('%H:%M')(new Date(d))
                });

            chart.yAxis
                .tickFormat(d3.format(',1f'));

            d3.select('#chart1 svg')
                .datum(data)
                .transition().duration(500)
                .call(chart);

            nv.utils.windowResize(chart.update);
            return chart;
        });
    }
function getData(){
    var arr = [];
    d3.json('http://localhost:8080/api', function(inndata){
        for(var i in inndata){
            var dataarr = new Array();
            dataarr[0] = new Date(inndata[i].date);
            dataarr[1] = inndata[i].count;
            arr.push(dataarr);
            //arr.push({x: new Date(inndata[i].date), y: inndata[i].count});
        }

    return arr;
}
</script>

The json string lookis like this:
[{"date": "2013-01-07 09:01", "count": 2}, {"date": "2013-01-07 05:02", "count": 2}, }]
4

1 に答える 1

0

Javascriptは非同期であるため、d3.jsonメソッドへのコールバック内でsetupGraph（）を指定する必要があります。したがって、次のようなことを行います。

var arr = [];
d3.json('http://localhost:8080/api', function(inndata){
    for(var i in inndata){
        var dataarr = new Array();
        dataarr[0] = new Date(inndata[i].date);
        dataarr[1] = inndata[i].count;
        arr.push(dataarr);
        //arr.push({x: new Date(inndata[i].date), y: inndata[i].count});
    }
    var data = [{
       "key": "HTTP 200",
       "values": arr
    }];
    setupGraph(data) // Pass through data to setupGraph
}
于 2013-03-09T19:37:22.073 に答える