为chartjs动态排列数组

Question

我正在尝试为 Chartjs 动态准备 json 数据。 数据是从 SQL 数据库接收的。 现在我正在尝试在 CHARTJS 中显示不同订单的数据。

不同的项目有不同数量的订单。 项目/数据中的日期始终具有相同的开始日期和结束日期以及相同的日期数量。

我收到的项目**数据**如下所示：

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}

现在我想将数据放入不同的数组中，以便在一个 Line-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
          },
           {
            ...
           }
         ]}

到目前为止，我能够达到的是获取具有不同订单号的数组并循环它们，但我无法将它们推入动态变量中。我还得到了一个 x 轴为日期的数组。

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 来显示它。

Answer 1

我不确定在这种情况下动态是什么意思，但既然你说你通过控制台得到了正确的结果，我假设你想要更新实例化图表的数据集。

如果是这种情况，您要做的就是使用新数据更新实际的 ChartJS 实例，仅更新数组不会触发任何反应。

从您拥有的代码中，您可以创建一个新的数据集，并且您可以使用数组函数

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 实例的数据集中。

如果您只是将数据推送到图表js通过引用使用的数组，它无法对此更改做出反应，您必须手动告诉图表js更新数据并重新绘制画布。

实现此目的的一种方法是使用 ChartJS 实例的操作

update

，文档中有一个示例：https://www.chartjs.org/docs/latest/developers/api.html#update-mode