我正在尝试从json动态地为chartjs准备数据。数据是从sql数据库接收的。现在我正在尝试在CHartJS中显示不同订单的数据。
对于不同的PROJECTS,有不同数量的ORDERS。PROJECT/数据中的DATE始终具有相同的开始和结束日期以及相同数量的日期。
我收到的一个项目的数据看起来像这样:
0:{DATE: 2023-04-09, HOURS: '.5' ORDER: 111}
1:{DATE: 2023-04-10, HOURS: '2' ORDER: 111}
2:{DATE: 2023-04-11, HOURS: '1.8' ORDER: 111}
...
10:{DATE: 2023-04-09, HOURS: '.0' ORDER: 221}
11:{DATE: 2023-04-10, HOURS: '18' ORDER: 221}
12:{DATE: 2023-04-11, HOURS: '9' ORDER: 221}
...
20:{DATE: 2023-04-09, HOURS: '.7' ORDER: 115}
21:{DATE: 2023-04-10, HOURS: '5' ORDER: 115}
22:{DATE: 2023-04-11, HOURS: '1' ORDER: 115}
字符串
现在我想把不同数组中的数据显示在一行-CHARTJS中。手动没有问题:
var HOURS1=[];
for(var i in data) {
if (data[i].ORDER== '111'){
HOURS1.push(data[i].HOURS)};
}
var HOURS2=[];
for(var i in data) {
if (data[i].ORDER== '221'){
HOURS2.push(data[i].HOURS)};
}
...
var chartdata = {
labels: uniqueDATES,
datasets : [
{
label: '111',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: HOURS1
},
{
...
}
]}
型
到目前为止,我所能达到的是获得一个具有不同ORDER编号的数组,并在它们之间循环,但我无法将它们推入动态变量中。
const allorders = [...new Set(data.map(item => item.ORDER))];
allorders.forEach((k) => {
const ho=[];
for(var i in data) {
if (data[i].ORDER== k){
ho.push(data[i].hour)};
}
console.log(ho)
})
型
这实际上在控制台中带来了正确的结果,但它没有保存,我不能用CHARTJS来显示它。
1条答案
按热度按时间vom3gejh1#
我不确定你在这个上下文中所说的动态是什么意思,但既然你说你用控制台得到了正确的结果,我假设你想为示例化的chartjs更新数据集。
如果是这样的话,你需要做的就是用新数据更新实际的chartjs示例,仅仅更新数组不会触发任何React。
从你的代码中,你可以创建一个新的数据集,你可以使用数组函数
reduce
:字符串
这段代码实际上是创建一个新的数组,然后你可以在chartjs示例中将它添加到你的数据集。
如果你只是将数据推送到chartjs通过引用使用的数组中,它无法对这种变化做出React,你必须手动告诉chartjs更新数据并重新绘制画布。
一种方法是使用chartjs示例的action
update
,您可以在文档https://www.chartjs.org/docs/latest/developers/api.html#update-mode中找到示例: