ChartJS 在一个图中组合了两个具有一些相似性的数组

问题描述

我需要将两个数组组合成一个条形图，而无需手动操作数组。 数组示例：

result1 = {a:2,b:5,c:52}
result2 = {a:4,b:3,d:47}
//WHERE (to elaborate):
result1.labels = {a,b,c};
result1.data = {2,5,52};
result2.labels = {a,d};
result2.data = {4,3,47};


      var myChart = new Chart(ctx,{
    type: 'bar',data: {
          datasets: [{
              label: 'Dataset 1',data: result1.data,order: 1,labels: result1.labels
          },{
              label: 'Dataset 2',data: result2.data,order: 2,labels: result2.labels
          }]
      },options: {
          scales: {
              y: {
                  beginAtZero: true
              }
          }
      }
  });

现在我只会得到 3 堆条形，它将合并 result1 和 result2 的 3. 条目，但我需要它来制作 4 个条形“a、b、c、d”。 我知道我可以手动填充 result1 并添加“d:0”并在 result2 中添加“c:0”，但由于它从不断改变返回数组大小的数据库中获取数据，这不是一个好的解决方案。

谢谢

解决方法

您可以创建所有键的 set，然后遍历对象并检查键是否已存在。如果没有添加它。

const result1 = {a:2,b:5,c:52};
const result2 = {a:4,b:3,d:47};

const getUniqueKeys = (...objs) => {
  // Create a set of all unique keys
  const keys = objs.reduce((keys,obj) => {
    for(key in obj) {
      keys.add(key)
    }
    
    return keys;
  },new Set());
  
  // Convert set to array
  return [...keys];
}

const addMissingValues = (keys,obj,fill = 0) => {
  // Create copy to prevent changing the original object
  const copy = {...obj};
  
  for(const key of keys) {
    // Add key if it doesn't exist
    if(!copy.hasOwnProperty(key)) {
      copy[key] = fill;
    }
  }
  
  // Return copy
  return copy;
}

const keys = getUniqueKeys(result1,result2);
const correct1 = addMissingValues(keys,result1);
const correct2 = addMissingValues(keys,result2);

console.log(correct1);
console.log(correct2);