Question

我确实在使用nvd3.js库制作stackedAreaChart时遇到了一些问题，其中包含使用jQuerys $.getJSON函数或d3.json函数从Web服务获取的数据。我从webservice获取数据，但无法将数据导入图表。我尝试过使用静态数据，但这很有效，但是在使用$.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
}

nvd3.js不会从jquery获取数据

1 个答案: