2

我在使用 nvd3.js 库stackedAreaChart使用 jQuerys$.getJSON函数或该d3.json函数从 Web 服务获取数据时确实遇到了一些问题。我正在从 web 服务获取数据，但无法将数据放入图表中。我尝试过使用静态数据，这很有效，但是使用$.getJSONor时会出现问题d3.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 是异步的 - 所以你必须在回调中提供 setupGraph() 到 d3.json 方法。所以做这样的事情：

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 回答