Javascript 实时更新人力车图

我正在尝试使用人力车创建一个很好的占位符图，显示随机数据的实时更新，如下所示：

var series = [[], []];
var random = new Rickshaw.Fixtures.RandomData(150);

for(var i = 0; i < 80; i++) {
    random.addData(series);
}

var throughput = new Rickshaw.Graph( {
    element: document.querySelector("#throughput_chart"),
    width: "300",
    height: "200",
    renderer: "line",
    series: [{
        color: "gold",
        data: series[0]
    }]
});

var alerts = new Rickshaw.Graph( {
    element: document.querySelector("#alerts_chart"),
    width: "300",
    height: "200",
    renderer: "line",
    series: [{
        color: "red",
        data: series[1]
    }]
});

throughput.render();
alerts.render();

setInterval(function() {
    random.addData(series);
    throughput.update();
    alerts.update();
    /* XXX: This causes the data to stop drawing properly
    series.forEach(function(s) {
        s.shift();
    });
    */
}, 1000);

var系列=[]，[]；
var random=新人力车。固定装置。随机数据（150）；
对于（变量i=0；i<80；i++）{
随机添加数据（系列）；
}
var吞吐量=新人力车。图表（{
元素：document.querySelector（“吞吐量图表”），
宽度：“300”，
高度：“200”，
渲染器：“行”，
系列：[{
颜色：“金色”，
数据：系列[0]
}]
});
var警报=新人力车。图表（{
元素：document.querySelector（“警报图表”），
宽度：“300”，
高度：“200”，
渲染器：“行”，
系列：[{
颜色：“红色”，
数据：系列[1]
}]
});
吞吐量。render（）；
alerts.render（）；
setInterval（函数（）{
随机添加数据（系列）；
吞吐量。更新（）；
alerts.update（）；
/*XXX：这会导致数据正确停止绘制
series.forEach（函数）{
s、 移位（）；
});
*/
}, 1000);

除了注释掉的部分外，这是有效的。事实上，它一直在添加数据，这意味着图形变得越来越拥挤。我希望每次在末尾添加新项时都能删除第一项，以保持图形具有相同数量的数据点，但当我将该代码放入其中时，它会迅速导致图形不显示任何数据，即使

console.log

显示数组中仍然充满数据

---

我如何才能做到这一点，以便一次只显示固定数量的数据点？

根据人力车文档（）中的示例，我总结了一些类似于您需要的内容：

var-tv=50；
var吞吐量=新人力车。图表({
元素：document.querySelector（“吞吐量图表”），
宽度：“300”，
高度：“200”，
渲染器：“行”，
系列：新人力车。系列。固定时间([{
名称：“一”，颜色：“金色”
}]，未定义{
时间间隔：电视，
最大数据点：100，
时基：新日期（）.getTime（）/1000
})
});
var警报=新人力车。图表({
元素：document.querySelector（“警报图表”），
宽度：“300”，
高度：“200”，
渲染器：“行”，
系列：新人力车。系列。固定时间([{
名称：“一”，颜色：“红色”
}]，未定义{
时间间隔：电视，
最大数据点：100，
时基：新日期（）.getTime（）/1000
})
});
对于（变量i=0；i<100；i++）{
添加随机数据（吞吐量）；
添加随机数据（警报）；
}
吞吐量。render（）；
alerts.render（）；
setInterval（函数（）{
添加随机数据（吞吐量）；
添加随机数据（警报）；
吞吐量。render（）；
alerts.render（）；
}(电视),；
函数添加随机数据（图表）{
风险值数据={
一：Math.floor（Math.random（）*40）+120
};
图表.系列.添加数据（数据）；
}

据我所知，FixedDuration类不能处理RandomData。我要做的是删除序列数组中的第一个数据点，这样图形就不会变得拥挤，并随着更多数据的添加而向左流：

setInterval( function() {
    random.addData(seriesData);
    for (i=0; i < seriesData.length; i++){
        var series0 = seriesData[i][seriesData[i].length-1];
        seriesData[i].shift();
        seriesData[i].push(series0);
    }
    graph.update();
}, 3000 );

setInterval（函数（）{
随机添加数据（系列数据）；
对于（i=0；i

---

我不完全清楚为什么需要将最后添加的数据点添加回阵列的末尾（

series[x].push（seriex）

），但如果不是这样，它就不起作用了。它没有使最后一个数据点加倍的效果，只添加了一个数据点。希望这对你有用

所以秘密似乎是series.addData（）

setInterval( function() {
    random.addData(seriesData);
    for (i=0; i < seriesData.length; i++){
        var series0 = seriesData[i][seriesData[i].length-1];
        seriesData[i].shift();
        seriesData[i].push(series0);
    }
    graph.update();
}, 3000 );