根据类别 JAVASCRIPT 对多个属性进行分组。适用于一个但不是所有属性

Question

我有以下 JSON 字符串，我正在尝试按类别对其进行分组。

例如：

[{
    "category": "Messaging",
    "data": [7433],
    "backgroundColor": "rgba(255, 99, 132, 0.2)",
    "borderColor": "rgba(255,99,132,1)",
    "borderWidth": 2
}, {
    "category": "Price Promo",
    "data": [774],
    "backgroundColor": "rgba(255, 159, 64, 0.2)",
    "borderColor": "rgba(255, 159, 64, 1)",
    "borderWidth": 2
}, {
    "category": "Usability",
    "data": [5993],
    "backgroundColor": "rgba(255, 159, 64, 0.2)",
    "borderColor": "rgba(255, 159, 64, 1)",
    "borderWidth": 2
}, {
    "category": "Messaging",
    "data": [7624],
    "backgroundColor": "rgba(255, 99, 132, 0.2)",
    "borderColor": "rgba(255,99,132,1)",
    "borderWidth": 2
}, {
    "category": "Price Promo",
    "data": [900],
    "backgroundColor": "rgba(255, 159, 64, 0.2)",
    "borderColor": "rgba(255, 159, 64, 1)",
    "borderWidth": 2
}, {
    "category": "Usability",
    "data": [5865],
    "backgroundColor": "rgba(255, 159, 64, 0.2)",
    "borderColor": "rgba(255, 159, 64, 1)",
    "borderWidth": 2
}, {
    "category": "Messaging",
    "data": [7161],
    "backgroundColor": "rgba(255, 99, 132, 0.2)",
    "borderColor": "rgba(255,99,132,1)",
    "borderWidth": 2
}, {
    "category": "Price Promo",
    "data": [1005],
    "backgroundColor": "rgba(255, 159, 64, 0.2)",
    "borderColor": "rgba(255, 159, 64, 1)",
    "borderWidth": 2
}, {
    "category": "Usability",
    "data": [5940],
    "backgroundColor": "rgba(255, 159, 64, 0.2)",
    "borderColor": "rgba(255, 159, 64, 1)",
    "borderWidth": 2
}]

至（预期结果）：

{
    label: 'Messaging',
    data: [7433, 7624, 7161],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 99, 132, 0.2)'
    ],
    borderColor: [
      'rgba(255,99,132,1)',
      'rgba(255,99,132,1)',
      'rgba(255,99,132,1)'
    ],
    borderWidth: 2
  }

共有三个类别。我如何在 javascript 中执行此操作：

下面的尝试代码，但这仅适用于数据属性，而不适用于背景颜色和边框颜色等：

for (var i = 0; i < stackBarData.length; i++) {
  var categoryName = stackBarData[i].category;
  if (!groups[categoryName]) {
    groups[categoryName] = [];
  }
  groups[categoryName].push(stackBarData[i].data);
}

stackBarData = [];
for (var categoryName in groups) {
  stackBarData.push({
    label: categoryName,
    data: groups[categoryName]
  });
}

dataSet = stackBarData.map(x => ({
  label: x.label,
  data: x.data.map(y => y[0])
}));

如何更改以上内容以在我的分组中包含背景颜色、边框颜色、边框宽度？

Answer 1

您可以按类别分组并取出值以添加到数组中。

var json = '[{"category":"Messaging","data":[7433],"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgba(255,99,132,1)","borderWidth":2},{"category":"Price Promo","data":[774],"backgroundColor":"rgba(255, 159, 64, 0.2)","borderColor":"rgba(255, 159, 64, 1)","borderWidth":2},{"category":"Usability","data":[5993],"backgroundColor":"rgba(255, 159, 64, 0.2)","borderColor":"rgba(255, 159, 64, 1)","borderWidth":2},{"category":"Messaging","data":[7624],"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgba(255,99,132,1)","borderWidth":2},{"category":"Price Promo","data":[900],"backgroundColor":"rgba(255, 159, 64, 0.2)","borderColor":"rgba(255, 159, 64, 1)","borderWidth":2},{"category":"Usability","data":[5865],"backgroundColor":"rgba(255, 159, 64, 0.2)","borderColor":"rgba(255, 159, 64, 1)","borderWidth":2},{"category":"Messaging","data":[7161],"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgba(255,99,132,1)","borderWidth":2},{"category":"Price Promo","data":[1005],"backgroundColor":"rgba(255, 159, 64, 0.2)","borderColor":"rgba(255, 159, 64, 1)","borderWidth":2},{"category":"Usability","data":[5940],"backgroundColor":"rgba(255, 159, 64, 0.2)","borderColor":"rgba(255, 159, 64, 1)","borderWidth":2}]',
    result = Object.values(JSON
        .parse(json)
        .reduce((r, { category, borderWidth, ...o }) => {
            r[o.category] = r[o.category] || { category, data: [], backgroundColor: [], borderColor: [], borderWidth };
            Object.entries(o).forEach(([k, v]) => r[o.category][k] = (r[o.category][k] || []).concat(v));
            return r;
        }, {}));

console.log(result);

Answer 2

在第一个循环中创建您想要的完整对象，并将每个属性推送到相应的数组中。

var groups = {};
stackBarData.forEach(d => {
  var categoryName = d.category;
  if (!groups[d.category]) {
    groups[d.category] = {
      label: d.category,
      data: [],
      backgroundColor: [],
      borderColor: [],
      borderWidth: d.borderWidth
    };
  }
  groups[d.category].data.push(d.data[0]);
  groups[d.category].backgroundColor.push(d.backgroundColor);
  groups[d.category].borderColor.push(d.borderColor);
});

stackBarData = Object.values(groups);