为 chartjs 动态排列数组-解网

问：

我正在尝试从 json 动态准备 chartjs 的数据。数据是从 sql 数据库接收的。现在我正在尝试在 CHARTJS 中显示不同 ORDERS 的数据。

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

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

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
          },
           {
            ...
           }
         ]}

到目前为止，我能够达到的是获取具有不同 ORDER 编号的数组并遍历它们，但我无法将它们推送到动态变量中。我还得到了一个带有 x 轴 DATES 的数组。

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 对其进行调整。

JavaScript 变量动态图表 .js

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 通过引用使用的数组，则它无法对此更改做出反应，您必须手动告诉 chartjs 更新数据并重新绘制画布。

一种方法是使用 chartjs 实例的操作，文档中有一个示例：https://www.chartjs.org/docs/latest/developers/api.html#update-modeupdate

上一个：如何从其中的 Svelte 应用程序访问 iframe 变量？

下一个：全局变量、add_filter和add_action（WooCommerce/WordPress）

为 chartjs 动态排列数组

dynamically arrange array for chartjs

评论