Chart.js 教程：创建分组堆叠柱状图-js教程-PHP中文网

Chart.js 教程：创建分组堆叠柱状图

DDD

发布： 2025-11-06 17:22:26

原创

832人浏览过

Chart.js 教程：创建分组堆叠柱状图

本教程详细指导如何在 chart.js 中创建分组堆叠柱状图。我们将探讨如何将复杂的原始数据结构（包含设备、用户和积分）转换为 chart.js 所需的 `labels` 和 `datasets` 格式。重点在于数据预处理、动态生成数据集，以及配置 chart.js 的堆叠选项，以清晰展示多维度数据。

在数据可视化中，分组堆叠柱状图是一种强大的工具，能够在一个图表中同时展示多个类别的数据堆叠情况，并在不同的组之间进行比较。Chart.js 提供了灵活的配置选项来实现这种图表，但关键在于正确地准备数据结构。

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

Chart.js 绘制柱状图时，通常需要以下两种核心数据：

labels: 对应图表的 X 轴标签，代表不同的分组（例如本例中的设备名称）。
datasets: 一个数组，每个元素代表图表中的一个数据集。对于堆叠柱状图，每个数据集通常代表堆叠中的一个组成部分（例如本例中的用户类别）。每个数据集对象包含：
- label: 数据集的名称（例如用户 "amckinlay"）。
- data: 一个数组，其长度应与 labels 数组相同，每个值对应 labels 中相应位置的堆叠数值。
- backgroundColor: 数据集的颜色。

原始数据结构分析

假设我们有以下原始数据 alldata，它包含设备名称和每个设备上不同用户的积分：

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

登录后复制

这种结构对于 Chart.js 来说并不直接适用，因为 values 数组中的每个对象是一个键值对，难以直接提取 category（用户）和 value（积分）。为了更好地与 Chart.js 的 datasets 结构匹配，我们需要将数据转换为更扁平、更易于访问的形式。

2. 数据预处理与转换

为了满足 Chart.js 的要求，我们需要将原始数据 alldata 转换为适合 labels 和 datasets 的格式。

2.1 标准化数据结构

首先，我们将原始数据中的 values 数组扁平化，并为每个用户-设备-积分组合创建一个统一的对象结构。推荐的目标结构是 { device: "Laptop", category: "amckinlay", value: 30 }。

// 定义颜色配置，方便管理不同类别的颜色
const colorSettings = [
  {
    category: 'amckinlay',
    backgroundColor: 'rgba(75, 192, 192, 0.6)',
  },
  {
    category: 'cvu',
    backgroundColor: 'rgba(255, 99, 132, 0.6)',
  },
  // 可以添加更多类别及其颜色
];

// 将原始数据扁平化并标准化
let processedData = alldata
  .map((x) =>
    x.values.reduce((acc, cur) => {
      for (let k in cur) {
        acc.push({
          device: x.device,
          category: k,
          value: parseInt(cur[k]), // 确保值为数字类型
        });
      }
      return acc;
    }, [])
  )
  .flat();

console.log("标准化后的数据:", processedData);
/* 示例输出:
[
  { device: "Laptop", category: "amckinlay", value: 30 },
  { device: "Laptop", category: "cvu", value: 150 },
  { device: "Phone", category: "amckinlay", value: 100 }
]
*/

登录后复制

上述代码首先遍历 alldata 中的每个设备，然后遍历其 values 数组，将每个键值对转换为一个包含 device、category（用户）和 value（积分）的扁平对象。parseInt() 用于确保积分值是数字类型。

2.2 提取 X 轴标签

X 轴的标签将是所有不重复的设备名称。

Bing图像创建器

必应出品基于DALL·E的AI绘图工具

查看详情

// 提取所有不重复的设备名称作为 X 轴标签
const labels = [...new Set(processedData.map((x) => x.device))];
console.log("X 轴标签:", labels); // 输出: ["Laptop", "Phone"]

登录后复制

2.3 构建 Chart.js 数据集

接下来，我们需要为 Chart.js 构建 datasets 数组。每个 category（用户）将对应一个 dataset 对象。

// 提取所有不重复的类别（用户）作为子标签
const subLabels = [...new Set(processedData.map((x) => x.category))];
console.log("子标签（数据集类别）:", subLabels); // 输出: ["amckinlay", "cvu"]

// 构建 Chart.js 的 datasets 数组
const datasets = subLabels.reduce((acc, currentCategory) => {
  // 为当前类别创建一个数据集对象
  const dataset = {
    label: currentCategory,
    data: [],
    backgroundColor: colorSettings.find((c) => c.category === currentCategory)?.backgroundColor || 'rgba(0,0,0,0.5)', // 从颜色配置中获取颜色
  };

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

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

console.log("Chart.js 数据集:", 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 (因为Phone没有cvu的数据)
    backgroundColor: 'rgba(255, 99, 132, 0.6)'
  }
]
*/

登录后复制

这段代码首先获取所有唯一的 category 作为 subLabels。然后，它遍历每个 subLabel，为它创建一个 dataset 对象。在构建 dataset.data 数组时，它会遍历所有的 labels（设备），查找对应设备和类别的积分值。如果某个设备没有某个类别的积分数据，则 find 方法会返回 undefined，此时使用 ?? 0 将其填充为 0，确保 data 数组的长度与 labels 数组一致。

3. Chart.js 配置与渲染

数据准备就绪后，最后一步是配置 Chart.js 并将其渲染到页面上。关键在于设置 options 中的 stacked 属性。

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js 分组堆叠柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: sans-serif; }
        .chart-container {
            width: 80%;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // ... (此处粘贴上面 2.1, 2.2, 2.3 节的所有 JavaScript 代码，包括 alldata, colorSettings, processedData, labels, subLabels, datasets 的定义) ...

        // Chart.js 渲染配置
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar', // 图表类型为柱状图
            data: {
                labels: labels, // X 轴标签
                datasets: datasets, // 数据集
            },
            options: {
                responsive: true, // 启用响应式布局
                plugins: {
                    title: {
                        display: true,
                        text: '设备用户积分分布图'
                    }
                },
                scales: {
                    x: {
                        stacked: true, // X 轴启用堆叠
                        title: {
                            display: true,
                            text: '设备'
                        }
                    },
                    y: {
                        stacked: true, // Y 轴启用堆叠
                        title: {
                            display: true,
                            text: '积分'
                        }
                    },
                },
            },
        });
    </script>
</body>
</html>

登录后复制

在 options 配置中：

scales.x.stacked: true 确保 X 轴上的每个分组（设备）内部的柱子是堆叠的。
scales.y.stacked: true 确保 Y 轴上的数值是累加的，对应堆叠效果。
responsive: true 让图表在容器大小变化时自动调整。

4. 注意事项

数据类型一致性: 确保 data 数组中的值都是数字类型。原始数据中的 '30' 等字符串需要通过 parseInt() 或 parseFloat() 转换为数字。
颜色管理: 建议将颜色配置集中管理（如 colorSettings 数组），这样可以方便地为不同的类别分配颜色，提高代码的可维护性和一致性。
缺失数据处理: 当某个设备没有某个类别的堆叠数据时，应在 dataset.data 中填充 0，而不是省略，以保证 data 数组的长度与 labels 数组一致，避免图表渲染错误。
性能优化: 对于非常大的数据集，数据预处理可能需要优化，例如使用更高效的查找算法或考虑在后端进行部分数据转换。

5. 总结

创建 Chart.js 分组堆叠柱状图的关键在于数据预处理。通过将复杂的原始数据结构转换为 Chart.js 所需的 labels 和 datasets 格式，我们能够灵活地展示多维度数据。核心步骤包括：

标准化原始数据: 将嵌套的、键值对形式的数据扁平化为统一的对象结构。
提取 X 轴标签: 从标准化数据中获取所有唯一的设备名称。
动态构建数据集: 遍历所有唯一的类别（用户），为每个类别创建一个 dataset 对象，并填充对应设备的数据。
配置 Chart.js 选项: 在 options.scales 中设置 x.stacked: true 和 y.stacked: true 以启用堆叠功能。

遵循这些步骤，您就可以在 Chart.js 中创建出清晰、信息丰富的分组堆叠柱状图。

以上就是Chart.js 教程：创建分组堆叠柱状图的详细内容，更多请关注php中文网其它相关文章！