Javascript 自动删除Chart.js中的旧数据点

我有一个实时数据图表，它由Javascript更新

但如果脚本运行时间过长，数据就会被塞满

旧数据必须移到左侧，然后才能删除

现场演示：

代码：

函数重载（）{
adddata（Math.random（）*100，Math.random（）*10）；
设置超时（重新加载，1000）；
}
var canvas=document.getElementById（'myChart'）；
风险值数据={
数据集：[{
标签：“下载”，
边框颜色：“rgb（237,18,237）”，
填充：假，
边框宽度：3
},
{
标签：“上传”，
边框颜色：“rgb（0，115，255）”，
填充：假，
边框宽度：3
}
]
}
变量选项={
比例：{
雅克斯：[{
类型：'线性'，
}],
xAxes：[{
键入：“时间”，
滴答声：{
马克斯：5，
},
时间：{
单位:"第二",，
显示格式：{
“第二个”：“HH:mm:ss”，
},
tooltipFormat:'HH:mm:ss'，
}
}]
},
展品：真的
};
var myChart=new Chart.Line（画布{
数据：数据，
选项：选项
});
函数adddata（download=NaN，upload=NaN，label=moment（））{
var数据集=myChart.data.datasets；
myChart.data.labels.push（标签）；
数据集[0].data.push（下载）；
数据集[1].data.push（上传）；
myChart.update（）；
}
重新加载（）
为了实现这一点，我添加了一个配置变量
MAX\u DATA\u SET\u LENGTH
，然后在
addData（）
中检查上传/下载数据集的长度是否大于您的配置

如果数据集比您想要的大，我将删除数据集数组（删除第一个条目）。我还移动/移除了第一个标签，以保持数据的准确性

如果您仍然希望保留所有数据，我建议将其保存在Chart.js不使用的单独数组中

另外，我将代码改为使用，因为它在这里更有意义。您希望在一个时间间隔内运行addData，而不是在超时后运行一次（即使通过多次设置超时仍能使其正常工作）


var MAX\u DATA\u SET\u LENGTH=15；
函数重载（）{
adddata（Math.random（）*100，Math.random（）*10）；
}
var canvas=document.getElementById（'myChart'）；
风险值数据={
数据集：[{
标签：“下载”，
边框颜色：“rgb（237,18,237）”，
填充：假，
边框宽度：3
},
{
标签：“上传”，
边框颜色：“rgb（0，115，255）”，
填充：假，
边框宽度：3
}
]
}
变量选项={
比例：{
雅克斯：[{
类型：'线性'，
}],
xAxes：[{
键入：“时间”，
滴答声：{
马克斯：5，
},
时间：{
单位:"第二",，
显示格式：{
“第二个”：“HH:mm:ss”，
},
tooltipFormat:'HH:mm:ss'，
}
}]
},
展品：真的
};
var myChart=new Chart.Line（画布{
数据：数据，
选项：选项
});
函数adddata（download=NaN，upload=NaN，label=moment（））{
var数据集=myChart.data.datasets；
var labels=myChart.data.labels；
var downloadDataSet=数据集[0]。数据；
var uploadDataSet=数据集[1]。数据；
var downloadDataLength=downloadDataSet.length；
var uploadDataLength=uploadDataSet.length；
//如果上载/下载的数据集包含超过最大数据集长度的条目，
//删除第一个条目并按入新的数据条目
var didRemoveData=false；
if（下载数据长度>最大数据设置长度）{
downloadDataSet.shift（）；
didRemoveData=true；
}
if（上传数据长度>最大数据设置长度）{
uploadDataSet.shift（）；
didRemoveData=true；
}
//如果删除了下载或上载数据，我们还需要删除
//第一个用来防止数据压缩的标签。
if（didRemoveData）{
labels.shift（）；
}
标签。推（标签）；
downloadDataSet.push（下载）；
uploadDataSet.push（上传）；
myChart.update（）；
}
设置间隔（重新加载，1000）

谢谢！我试图从数组中删除旧数据，但忘记删除标签。很高兴我能帮上忙！