jquery - nvd3.js不会从jquery获取数据

Question

我在使用 nvd3.js 库使用 jQuery $.getJSON 函数或 从 Web 服务获取数据来制作 stackedAreaChart 时确实遇到了一些问题d3.json 函数。 我正在从网络服务获取数据，但无法将数据放入图表中。 我尝试过使用静态数据，这有效，但是当使用 $.getJSON 或 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}, }]

Answer 1

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
}