Chart.js：如何创建展示设备用户与积分的分组堆叠柱状图

需求概述 #

原始数据包含多个设备名称，记录了各用户在对应设备上的积分，需要用Chart.js实现柱状图：每个设备对应x轴的一个标签，每个设备下的柱状条对应一个关联用户，柱子高度代表该用户在该设备上的积分，同时能直观看到每个设备的用户数量。

原始数据结构 #

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

当前代码存在的问题 #

1. 循环逻辑冗余：内层遍历labels的判断没有实际作用，无法正确提取用户积分
2. 数据格式错误：直接将values对象数组赋值给data，Chart.js需要的是数值数组，无法识别对象格式
3. 数据集组织错误：按设备而非用户组织数据集，不符合Chart.js柱状图的系列化要求（每个系列对应一个用户，跨设备展示积分）

解决方案代码 #

步骤1：数据预处理（转换为Chart.js可识别的格式） #

// 1. 提取所有设备作为x轴标签
const labels = alldata.map(item => item.device);

// 2. 收集所有唯一的用户
const allUsers = new Set();
alldata.forEach(item => {
  item.values.forEach(userItem => {
    Object.keys(userItem).forEach(user => allUsers.add(user));
  });
});
const users = Array.from(allUsers);

// 3. 为每个用户生成对应的数据集（包含在各设备上的积分）
const datasets = users.map((user, index) => {
  // 生成随机背景色（方便区分不同用户）
  const bgColor = `rgba(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, 0.6)`;
  
  // 遍历每个设备，提取当前用户的积分，无数据则填0
  const data = labels.map(label => {
    const deviceData = alldata.find(item => item.device === label);
    const userData = deviceData.values.find(item => Object.keys(item)[0] === user);
    return userData ? parseInt(userData[user]) : 0;
  });

  return {
    label: user,
    data: data,
    backgroundColor: bgColor
  };
});

步骤2：初始化Chart.js图表 #

<!-- 先引入Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 准备canvas容器 -->
<canvas id="deviceUserChart" width="400" height="200"></canvas>

<script>
// 初始化图表
const ctx = document.getElementById('deviceUserChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: datasets
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '积分'
        }
      },
      x: {
        title: {
          display: true,
          text: '设备'
        }
      }
    },
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '各设备用户积分分布'
      }
    }
  }
});
</script>

效果说明 #

• x轴为设备名称（Laptop、Phone）
• 每个设备下的不同颜色柱子对应不同用户
• 柱子高度对应用户在该设备上的积分，无积分的用户会显示高度为0的柱子（若需隐藏可调整数据处理逻辑）
• 图例显示用户与颜色的对应关系

内容的提问来源于stack exchange，提问作者Abzal Ali