Chart.js 高级教程：构建分组堆叠柱状图的数据转换与配置实践

// 原始数据示例
const alldata = [
    {
        device: "Laptop",
        values: [
            { amckinlay: '30' },
            { cvu: '150' }
        ]
    },
    {
        device: "Phone",
        values: [
            { amckinlay: '100' }
        ]
    }
];

const colorSettings = [
  {
    category: 'amckinlay',
    backgroundColor: 'rgba(75, 192, 192, 0.6)',
  },
  {
    category: 'cvu',
    backgroundColor: 'rgba(255, 99, 132, 0.6)',
  },
  // 可以根据需要添加更多类别及其颜色
];

const labels = alldata.map((x) => x.device);
// 结果: ['Laptop', 'Phone']

let transformedData = alldata
  .map((x) =>
    x.values.reduce((acc, cur) => {
      // 遍历每个 { key: value } 对象
      for (let k in cur) {
        acc.push({
          device: x.device,    // 关联设备
          category: k,         // 提取键作为类别
          value: parseInt(cur[k]), // 提取值并转换为数字
        });
      }
      return acc;
    }, []) // 初始累加器为空数组
  )
  .flat(); // 扁平化数组，将所有子数组合并成一个

/*
transformedData 结果示例:
[
  { device: 'Laptop', category: 'amckinlay', value: 30 },
  { device: 'Laptop', category: 'cvu', value: 150 },
  { device: 'Phone', category: 'amckinlay', value: 100 }
]
*/

const subLabels = [...new Set(transformedData.map((x) => x.category))];
// 结果: ['amckinlay', 'cvu']

const datasets = subLabels.reduce((acc, currentCategory) => {
  // 为当前类别找到对应的颜色
  const categoryColor = colorSettings.find((c) => c.category === currentCategory)?.backgroundColor;

  // 初始化当前类别的 dataset 对象
  const currentDataset = {
    label: currentCategory,
    data: [],
    backgroundColor: categoryColor || 'rgba(0, 0, 0, 0.2)', // 提供一个默认颜色
  };

  // 遍历所有设备，为当前类别填充数据
  for (let device of labels) {
    // 查找当前设备和类别下的值，如果没有则默认为 0
    const value =
      transformedData.find((x) => x.device === device && x.category === currentCategory)?.value ?? 0;
    currentDataset.data.push(value);
  }

  acc.push(currentDataset);
  return acc;
}, []);

/*
datasets 结果示例:
[
  {
    label: 'amckinlay',
    data: [30, 100], // 对应 Laptop, Phone
    backgroundColor: 'rgba(75, 192, 192, 0.6)'
  },
  {
    label: 'cvu',
    data: [150, 0], // 对应 Laptop, Phone (Phone 上 cvu 的数据为 0)
    backgroundColor: 'rgba(255, 99, 132, 0.6)'
  }
]
*/

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar', // 指定图表类型为柱状图
  data: {
    labels: labels,     // 使用之前生成的设备标签
    datasets: datasets, // 使用之前生成的动态数据集
  },
  options: {
    responsive: true, // 启用响应式布局
    scales: {
      x: {
        stacked: true, // X 轴启用堆叠
        title: {
          display: true,
          text: '设备类型'
        }
      },
      y: {
        stacked: true, // Y 轴启用堆叠
        title: {
          display: true,
          text: '用户积分'
        }
      },
    },
    plugins: {
        title: {
            display: true,
            text: '各设备用户积分堆叠分布图',
            font: {
                size: 18
            }
        }
    }
  },
});