Javascript 遍历Chart.js数据字段中的数组 更新:
我想在Chart.js图表的数据字段中遍历一个数组 此代码适用于以下示例:Javascript 遍历Chart.js数据字段中的数组 更新:,javascript,chart.js,Javascript,Chart.js,我想在Chart.js图表的数据字段中遍历一个数组 此代码适用于以下示例: data: [ {x: '2019-08-12 09:40:15', y:4}, {x: '2019-08-13 09:40:15', y:5}, {x: '2019-08-14 09:40:15', y:6}, ], 然后尝试按如下方式遍历数组: batterybank1.forEach(function(element){ console.log(element) "{x:\'element
data: [
{x: '2019-08-12 09:40:15', y:4}, {x: '2019-08-13 09:40:15', y:5}, {x: '2019-08-14 09:40:15', y:6},
],
然后尝试按如下方式遍历数组:
batterybank1.forEach(function(element){
console.log(element)
"{x:\'element.timestamp', y:element.voltage},"
})
console.logelement提供了正确的输出,但是图表没有得到更新。。。在控制台上,我没有收到任何警告/错误-只是图形没有输出
以下操作也不起作用,只输出console.log,但不更新图形
batterybank1.forEach(function(element){
console.log(element)
"{x:\'2019-08-12 09:40:15', 1},"
})
如中所述,每次将一个点添加到图表中,如下所示:
batterybank1.forEach(function(element){
chart.data.datasets[0].data.push(element);
})
这是假设元素的格式与数据中的点相同
之后,您需要调用chart.update;以显示新数据
下面是一个工作示例:
让数据=[{t:'2019-08-1209:40:15',y:4},{t:'2019-08-1309:40:15',y:5},{t:'2019-08-1409:40:15',y:6},{t:'2019-08-1509:40:15',y:7}];
var chart=new Chartdocument.getElementById'cht',{type:'bar',数据:
{
数据集:[{
标签:“CHRT-Chart.js公司”,
背景颜色:“ff0000”,
边框颜色:“ff0000”,
类型:'bar',
点半径:0,
填充:假,
线张力:0,
边界宽度:2,
数据:数据}]
},选项:{
比例:{
xAxes:[
{
键入:“时间”,
分布:'系列',
滴答声:
{
资料来源:“数据”,
autoSkip:对
}
}]
}
} };
document.getElementById'addPoints'。addEventListener'click',函数{
让extra=[{t:'2019-08-1609:40:15',y:4},{t:'2019-08-1709:40:15',y:5},{t:'2019-08-1809:40:15',y:6},{t:'2019-08-1909:40:15',y:7}];
extra.forEachp=>
{
chart.data.datasets[0].data.pushp;
};
图表.更新;
};
加分
为什么在console.log之后有这些字符串?@MattEllen,数据字段接受格式为{x:,y:},{x:,y:}。。。据我所知,所以我试图在数据字段中使用for循环输出它。参考第一个代码部分,其中我给出了一个有效的示例。OK。将字符串放在那里不会将其输出到控制台,也不会从函数返回它。它不会起什么作用。如何使用chart.js将数据添加到图表中?我不希望将该字符串输出到控制台。请参阅我的第一个示例,了解如何将数据添加到chart.js中—这就是我希望在循环中复制的内容—谢谢!我采用了类似的方法——检查原始帖子中的更新。
batterybank1.forEach(function(element){
console.log(element)
"{x:\'2019-08-12 09:40:15', 1},"
})
batterybank1.forEach(function(element){
chart.data.datasets[0].data.push(element);
})