Chart.js 教程：创建分组堆叠条形图

[
    {
        device: "Laptop",
        values: [
            {amckinlay: '30'},
            {cvu: '150'}
        ]
    },
    {
        device: "Phone",
        values: [
            {amckinlay: '100'}
        ]
    }
]

[
    { device: "Laptop", category: "amckinlay", value: 30 },
    { device: "Laptop", category: "cvu", value: 150 },
    { device: "Phone", category: "amckinlay", value: 100 }
]

// 假设 alldata 是从原始数据源获取的数组
var alldata = [
    {
        device: "Laptop",
        values: [
            {amckinlay: '30'},
            {cvu: '150'}
        ]
    },
    {
        device: "Phone",
        values: [
            {amckinlay: '100'}
        ]
    }
];

// 定义颜色设置，为每个用户（category）指定背景色
var colorSettings = [
  {
    category: 'amckinlay',
    backgroundColor: 'rgba(75, 192, 192, 0.6)',
  },
  {
    category: 'cvu',
    backgroundColor: 'rgba(255, 99, 132, 0.6)',
  },
];

// 1. 提取X轴标签（设备名称）
var labels = alldata.map((x) => x.device);

// 2. 扁平化数据结构
// 将原始数据转换为 { device, category, value } 的扁平数组
alldata = alldata
  .map((x) =>
    x.values.reduce((acc, cur) => {
      for (let k in cur) {
        acc.push({
          device: x.device,
          category: k,
          value: parseInt(cur[k], 10), // 确保值是数字
        });
      }
      return acc;
    }, [])
  )
  .flat();

// 3. 提取所有唯一的类别（用户名称），这将成为每个数据集的标签
var subLabels = [...new Set(alldata.map((x) => x.category))];

// 4. 构建 Chart.js 的 datasets 数组
var datasets = subLabels.reduce((acc, curCategory) => {
  // 对于每个类别（用户），构建一个数据集
  let dataset = {
    label: curCategory,
    data: [],
    backgroundColor: colorSettings.find((x) => x.category === curCategory)?.backgroundColor || 'rgba(0, 0, 0, 0.2)', // 查找对应颜色，没有则使用默认
  };

  // 遍历所有设备，为当前类别填充数据
  for (let device of labels) {
    const value = alldata.find(
      (x) => x.device === device && x.category === curCategory
    )?.value ?? 0; // 如果没有找到对应数据，则默认为0
    dataset.data.push(value);
  }
  acc.push(dataset);
  return acc;
}, []);

// 最终的 labels 和 datasets 结构将如下：
// labels: ["Laptop", "Phone"]
// datasets: [
//   { label: "amckinlay", data: [30, 100], backgroundColor: "..." },
//   { label: "cvu", data: [150, 0], backgroundColor: "..." }
// ]

// 获取 Canvas 元素
const ctx = document.getElementById('myChart').getContext('2d');

// 初始化 Chart.js
const myChart = new Chart(ctx, {
  type: 'bar', // 图表类型为条形图
  data: {
    labels: labels,     // 使用前面生成的设备标签
    datasets: datasets, // 使用前面生成的堆叠数据集
  },
  options: {
    responsive: true, // 使图表响应式
    scales: {
      x: {
        stacked: true, // X轴（类别轴）启用堆叠
      },
      y: {
        stacked: true, // Y轴（值轴）启用堆叠
      },
    },
    plugins: {
        tooltip: {
            mode: 'index', // 鼠标悬停时显示所有堆叠层的数据
            intersect: false,
        }
    }
  },
});