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

Question

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

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, b, 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”，但是由于它从不断更改返回数组大小的数据库中获取数据，这不是一个好的解决方案。

谢谢

Answer 1

您可以创建一个包含所有键的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);