我有这样的数据:
{
"measurements": [
{
"id": 10,
"key": "Demoo",
"value": "00:00:03.733;",
"date": "2023-02-08",
"time": "11:05",
"value_time_formatted": "00:00:03.733"
},
{
"id": 11,
"key": "Demooo 2",
"value": "00:00:05.191;",
"date": "2023-02-08",
"time": "11:31",
"value_time_formatted": "00:00:05.191"
},
{
"id": 12,
"key": "Demo 22",
"value": "00:00:03.002;",
"date": "2023-02-08",
"time": "11:31",
"value_time_formatted": "00:00:03.002"
}
]}
当我尝试从日期作为标签和value_time_formatted作为值制作一个折线图时,我得到这个错误:
ERROR TypeError: Cannot create property 'data' on string '00:00:03.733'
绑定图表值的代码如下所示:
this.lineBarLabels = [];
this.lineBarValue = [];
res.measurements.forEach(element => {
this.lineBarLabels.push(element.date);
this.lineBarValue.push(element.value_time_formatted);
});
this.lineBar = new Chart(this.linePresents.nativeElement, {
type: 'line',
data: {
labels: this.lineBarLabels,
datasets: this.lineBarValue
}
});
this.lineBar.update();
我试着把时间转换成毫秒,但是在屏幕上看起来很难看,用户需要把它转换回小时、分钟、秒和毫秒,这对客户来说太糟糕了:(
2条答案
按热度按时间weylhg0b1#
您的代码存在一些问题,下面是我可以发现的两个问题:
dataset
为对象数组,因此在您的情况下,您必须将代码更改为如下形式:this.lineBarLabels
从未设置(将是一个空数组),您必须更改:this.lineBarLabels.includes(element.date);
至this.lineBarLabels.push(element.date);
这些都是主要的问题,我不明白你应该寻找什么样的输出,我不认为将值设置为字符串
value_time_formatted
将工作,但如果你解决了上面提到的几点,你会更接近一个工作图表。看起来你已经解决了问题中的错误,如果你想改进你的代码,这里有一个提示给你时间转换(link to relevant documentation):
pes8fvy92#
我终于找到了解决办法,希望有人能以正确的方式使用它:)
在这部分代码之后:
res.measurements.forEach(element => { this.lineBarLabels.push(element.date); this.lineBarValue.push(element.value_time_formatted); }); this.createLineChart();
我创建了这个createLineChart()方法来解析和呈现图表: