动态排列chartjs的数组

hvvq6cgz  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(170)

我正在尝试从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来显示它。

vom3gejh

vom3gejh1#

我不确定你在这个上下文中所说的动态是什么意思,但既然你说你用控制台得到了正确的结果,我假设你想为示例化的chartjs更新数据集。
如果是这样的话,你需要做的就是用新数据更新实际的chartjs示例,仅仅更新数组不会触发任何React。
从你的代码中,你可以创建一个新的数据集,你可以使用数组函数reduce

const allorders = Array.from(new Set(data.map(item => item.ORDER)));

const hours = allorders.reduce((accumulator, currentOrder) => {
  const selectedOrder = data.find(order => order == currentOrder);
  if (selectedOrder) {
    return [...accumulator, selectedOrder.hour];
  }
  return accumulator;
}, []);

字符串
这段代码实际上是创建一个新的数组,然后你可以在chartjs示例中将它添加到你的数据集。
如果你只是将数据推送到chartjs通过引用使用的数组中,它无法对这种变化做出React,你必须手动告诉chartjs更新数据并重新绘制画布。
一种方法是使用chartjs示例的action update,您可以在文档https://www.chartjs.org/docs/latest/developers/api.html#update-mode中找到示例:

相关问题