Chart.js 实现分组堆叠柱状图：数据转换与配置详解_技术教程

本教程详细介绍了如何在 Chart.js 中创建分组堆叠柱状图。文章从理解 Chart.js 对数据结构的要求出发，逐步演示了如何将复杂的原始数据（包含设备、用户及其点数）转换为 Chart.js 可识别的格式。重点讲解了数据扁平化、类别识别以及数据集构建过程，并提供了完整的 Chart.js 配置代码，特别是堆叠选项的设置，旨在帮助开发者高效地实现此类复杂图表。

在数据可视化领域，分组堆叠柱状图是一种强大的工具，能够清晰地展示不同类别在多个分组下的构成和总和。Chart.js 作为一个流行的 JavaScript 图表库，提供了丰富的功能来实现这类图表。本文将深入探讨如何处理原始数据，并将其适配 Chart.js 的要求，最终呈现一个分组堆叠柱状图。

理解 Chart.js 对数据结构的要求

Chart.js 绘制柱状图时，通常需要两个核心部分：

labels: 这代表图表的 X 轴标签，对于分组堆叠柱状图，它通常是每个“组”的名称（例如，设备名称）。
datasets: 这是一个数组，每个元素代表图表中的一个数据集。在堆叠柱状图中，每个数据集通常代表一个堆叠的“层”（例如，一个用户）。每个数据集对象包含：
- label: 数据集的名称（例如，用户名）。
- data: 一个数组，包含对应 labels 中每个分组的数据点。
- backgroundColor: 数据集的颜色。

原始数据结构分析

假设我们有以下原始数据，它描述了不同设备上各个用户的点数：

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

这个数据结构的问题在于 values 数组中的每个对象是一个键值对，其键名（用户）是动态的，这使得直接提取和构建 Chart.js 所需的 datasets 变得困难。我们需要将其转换为更易于处理的扁平化结构。

数据预处理与转换

为了满足 Chart.js 的数据结构要求，我们需要对原始数据进行一系列转换。

1. 提取 X 轴标签（设备名称）

首先，从原始数据中提取所有唯一的设备名称，作为图表的 X 轴 labels。

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

2. 扁平化并标准化数据

将原始的嵌套结构转换为一个扁平化的数组，其中每个元素都包含 device、category（用户）和 value（点数）。

let transformedData = 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();

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

这里，我们使用 map 遍历每个设备，然后用 reduce 将其 values 数组中的键值对转换为标准的对象格式，最后用 flat() 将所有设备的数据扁平化到一个数组中。

3. 识别堆叠类别（用户名称）

从扁平化后的数据中提取所有唯一的 category（即用户名），这些将作为每个 dataset 的 label。

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

4. 构建 Chart.js 数据集 (datasets)

这是最关键的一步。我们需要遍历 subLabels（用户），为每个用户创建一个 dataset 对象。每个 dataset 的 data 数组应该包含该用户在所有设备上的点数，如果某个用户在某个设备上没有数据，则填入 0。同时，定义每个类别的背景颜色。

// 定义每个类别的颜色设置
const colorSettings = [
  {
    category: 'amckinlay',
    backgroundColor: 'rgba(75, 192, 192, 0.6)',
  },
  {
    category: 'cvu',
    backgroundColor: 'rgba(255, 99, 132, 0.6)',
  },
  // 可以添加更多类别和颜色
];

const datasets = subLabels.reduce((acc, currentCategory) => {
  const categoryData = [];
  for (let device of labels) {
    // 查找当前类别（用户）在当前设备上的值，如果没有则为0
    const value =
      transformedData.find(
        (x) => x.device === device && x.category === currentCategory
      )?.value ?? 0;
    categoryData.push(value);
  }

  // 获取当前类别的颜色
  const color = colorSettings.find((x) => x.category === currentCategory)
    ?.backgroundColor;

  acc.push({
    label: currentCategory,
    data: categoryData,
    backgroundColor: color,
  });

  return acc;
}, []);

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

Chart.js 配置

数据准备就绪后，就可以配置 Chart.js 来绘制图表了。关键在于设置 options.scales.x.stacked 和 options.scales.y.stacked 为 true，以启用堆叠功能。




    Chart.js 分组堆叠柱状图

注意事项

数据完整性： 确保所有可能的类别在 colorSettings 中都有对应的颜色定义，以避免图表样式缺失。
零值处理： 在构建 datasets 时，对于某个类别在特定分组下没有数据的情况，我们将其值设置为 0。这是确保 data 数组长度与 labels 匹配，并正确显示堆叠图的关键。
响应式设计： responsive: true 选项可以使图表在容器大小变化时自动调整。
数据类型： 确保所有数值数据都已正确转换为数字类型，例如使用 parseInt() 或 parseFloat()。

总结

通过上述步骤，我们成功地将复杂的原始数据转换为 Chart.js 所需的格式，并配置了一个功能完善的分组堆叠柱状图。核心在于理解 Chart.js 的数据模型，并通过数据转换逻辑将原始数据适配到这个模型中。掌握数据预处理和 Chart.js 配置中的 stacked 选项，是实现此类高级图表的关键。