javascript - 使用 Rickshaw.Graph.Ajax 时如何显示数据

Question

1.) 如何使用新的 Rickshaw.Graph.Ajax 访问数据？我的完整代码如下，包括通过 AJAX 调用的 JSON 示例集:

(function(){
    var ajaxGraph = new Rickshaw.Graph.Ajax( {
        element: document.getElementById("chart"),
        width: 400,
        height: 200,
        renderer: 'line',
        dataURL: '/data.json',
        onData: function(data) {
            var arrData = [];
            $.each(data[0], function(i, l){
                var rawData = l.data;
                arrData.push(rawData);
                return arrData;
            });

        }
    } );

})();

//JSON 样本

[{
    "took": 32,
    "total": 34200,
    "strokeVolume_count": {
        "name": "strokeVolume_count",
        "data": [
            {"x": 1387130400000,"y": 1800},
            {"x": 1387134000000,"y": 1800}
         ]
     }
}]

2.) 我怎么知道什么时候使用 .render() 方法？我已经看到在某些图表上而不是在其他图表上使用的示例。我已阅读 Rickshaw/github 文档，解释说您可以使用它来绘制或重绘图形，但是，我看到其他示例显示时未使用此方法。

Answer 1

我不完全确定你的第一个问题是什么意思，但你需要从 onData 函数返回一个系列对象数组。

关于调用 graph.render()，我已经成功地将调用置于 onComplete 回调中，如下所示:

(function(){
    var ajaxGraph = new Rickshaw.Graph.Ajax( {
        element: document.getElementById("chart"),
        width: 400,
        height: 200,
        renderer: 'line',
        dataURL: '/data.json',
        onData: function(data) {
            return [{
                name : "Stroke Volume"
                data : data[0].strokeVolume_count.data;
            }];
            // or simply return [data[0].strokeVolume_count]; since it looks like a series object already
        },
        onComplete: function() {
            // this is also where you can set up your axes and hover detail
            this.graph.render();
        }
    } );

})();