如何在Chart.js饼图中按类别分组数据

我有如下数据：

[
  {
    'category': 'winter',
    'amount': 10
  },
  {
    'category': 'winter',
    'amount': 10
  },
  {
    'category': 'summer',
    'amount': 10
  },
  {
    'category': 'spring',
    'amount': 10
  }
]

当前实现的饼图图例重复显示类别，显示内容为：

winter, winter, summer, spring

我需要实现的效果是合并相同category的数据，饼图中每个类别仅显示一条对应合并后数值的条目，图例显示为：

winter, summer, spring

要实现这个效果，首先需要对原始数据进行预处理，合并相同类别下的amount总和，再用处理后的数据生成饼图。

数据合并代码示例 #

// 原始数据
const rawData = [
  { 'category': 'winter', 'amount': 10 },
  { 'category': 'winter', 'amount': 10 },
  { 'category': 'summer', 'amount': 10 },
  { 'category': 'spring', 'amount': 10 }
];

// 通过reduce方法合并相同类别的数据
const mergedData = Object.values(rawData.reduce((accumulator, currentItem) => {
  // 如果当前类别还未在累加器中，初始化该类别的条目
  if (!accumulator[currentItem.category]) {
    accumulator[currentItem.category] = { 
      category: currentItem.category, 
      amount: 0 
    };
  }
  // 累加当前类别的amount值
  accumulator[currentItem.category].amount += currentItem.amount;
  return accumulator;
}, {}));

处理后的mergedData结果为：

[
  { category: 'winter', amount: 20 },
  { category: 'summer', amount: 10 },
  { category: 'spring', amount: 10 }
]

使用这个合并后的数据生成饼图，就能实现每个类别仅显示一条条目，图例也不会重复，数值为对应类别的总和。

内容的提问来源于stack exchange，提问作者Zig Zauer124