Question

我正在尝试根据我得到的通知创建实时线图。我查看过示例 - http://jsfiddle.net/kaliatech/4TMMD/ 但是我无法使它工作，速率正在更新并且数据被插入到数组中，但是我在图中只有一个点，它始终是第一个

this.data = [{            
    key: "New Incidents Rate",
    values: getData()
}];


function getData() {
    return that.newIncidentRate;
}

redraw();

function redraw() {

    nv.addGraph(function() {
        that.chart = nv.models.lineChart()
            .x(function(d) { return d.x })
            .y(function(d) { return d.y });
            //.color(d3.scale.category10().range());


        that.chart.xAxis
            .axisLabel('Time')
            .tickFormat(function(d) {
                return d3.time.format('%x')(new Date(d))
            });

        that.chart.yAxis
            .axisLabel('Rate')
            .tickFormat(d3.format(',r'));

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

        nv.utils.windowResize(that.chart.update);

        return that.chart;
    });
}

amplify.subscribe("newIncident", function (rate) {
    $scope.newRate = rate;
    $scope.$apply();

    if (that.newIncidentRate.length > 20) {
        that.newIncidentRate.shift();
    }

    var currentTime = new Date();

    that.newIncidentRate.push({
        x: new Date(currentTime.getTime()),
        y: rate
    });

    redraw();
});

我已经测试了它更多，它似乎与点数有关，当我拿样品一切都好（每次增加30点 - 新鲜）加2点时相同，所以我测试保持所有容器中的点并始终将其复制到新的 - 镰刀，似乎增加点数有问题

 function getData() {

    var arr = [];
    var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
    newIncidentRate.push({x:  new Date(theDate.getTime()), y: Math.random() * 100});
    theDate.setDate(theDate.getDate() + moveDate);
    ++moveDate;

    for (var d in newIncidentRate) {
        arr.push(d) ;
    }

    return arr;
}

完整代码 - http://jsfiddle.net/lirazrom/Wx5bG/

nvd3将点添加到折线图

0 个答案: