Chart.js 教程：创建分组堆叠条形图_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-06

浏览次数：次

返回列表

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

本教程详细介绍了如何使用 chart.js 创建分组堆叠条形图，以可视化复杂的多维度数据。核心内容包括对原始嵌套数据的结构化转换，将其适配 chart.js 所需的 `labels` 和 `datasets` 格式，以及配置图表的堆叠选项。通过具体的代码示例，用户将学习如何将设备、用户和积分数据有效地呈现在一个清晰、专业的图表中。

理解 Chart.js 堆叠条形图的数据结构要求

在 Chart.js 中创建堆叠条形图，需要遵循特定的数据结构。通常，图表的 data 对象包含两个主要部分：

labels: 定义图表X轴的分类标签。对于分组堆叠图，这些通常是主分类（例如，设备名称）。
datasets: 一个数组，每个元素代表图表中的一个数据集。在堆叠条形图中，每个 dataset 对象通常代表一个堆叠层（例如，特定用户的数据），它包含：
- label: 该数据集的名称（例如，用户名）。
- data: 一个数组，其中每个值对应 labels 中相应位置的数据点。
- backgroundColor: 该数据集的背景颜色。

对于本教程中的场景，我们需要在X轴上展示设备名称，并在每个设备对应的条形图中，堆叠显示不同用户的积分。这意味着每个用户将对应一个 dataset，而每个 dataset 的 data 数组将包含该用户在不同设备上的积分。

原始数据结构分析与挑战

我们原始的数据结构如下所示，其中包含设备名称和每个设备下用户及其对应积分的嵌套数组：

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

这种结构对 Chart.js 而言存在挑战：

values 数组中的每个对象都以动态的键（用户名）存储数据，这使得直接提取 label 和 data 变得复杂。
Chart.js 需要每个 dataset 的 data 数组与 labels 数组的长度匹配，且每个位置的数据点对应 labels 中的一个分类。

为了解决这些问题，我们需要对数据进行预处理和转换。

数据预处理与转换

数据转换的目标是将原始的嵌套结构扁平化为更易于处理的格式，例如：

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

这种扁平化结构将每个设备、用户和积分的组合作为一个独立的对象，方便后续构建 Chart.js 的 datasets。

以下是实现数据转换的 J*aScript 代码：

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情

// 假设 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: "..." }
// ]

代码解释：

colorSettings: 预定义了每个用户类别的颜色，这使得图表颜色管理更加灵活和可维护。
labels: 使用 map 方法从原始数据中直接提取所有设备名称作为X轴标签。
扁平化 alldata:
- 外层的 map 遍历每个设备。
- 内层的 reduce 遍历 values 数组，将 {"user": "points"} 形式的对象转换为 {"device": "...", "category": "user", "value": points}。
- flat() 方法将多层嵌套的数组扁平化为一层。
subLabels: 使用 Set 结合 map 提取所有不重复的用户名称，这些将作为每个堆叠部分的标签。
构建 datasets:
- 使用 reduce 遍历 subLabels（即每个用户）。
- 为每个用户创建一个 dataset 对象，包括 label (用户名) 和 backgroundColor。
- 在内部循环中，遍历所有的 labels (设备)，查找当前用户在每个设备上的积分。如果找不到，则默认为 0，确保 data 数组的长度与 labels 数组匹配。

Chart.js 配置与渲染

数据准备就绪后，接下来是配置 Chart.js 以渲染堆叠条形图。关键在于在 options 中设置 scales 的 stacked 属性为 true。

// 获取 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,
        }
    }
  },
});

关键配置解释：

type: 'bar': 指定图表类型为条形图。
data: { labels, datasets }: 绑定我们预处理好的 labels 和 datasets。
options.scales.x.stacked: true: 告诉 Chart.js X轴上的条形图应该堆叠显示。
options.scales.y.stacked: true: 告诉 Chart.js Y轴上的值也应该堆叠计算。这两个设置共同实现了堆叠条形图的效果。
plugins.tooltip: 可选配置，用于优化工具提示的显示，mode: 'index' 和 intersect: false 使得鼠标悬停在一个条形图上时，会显示该条形图所有堆叠层的数据。

总结与注意事项

创建 Chart.js 分组堆叠条形图的关键在于数据预处理。原始数据结构往往不直接符合 Chart.js 的要求，尤其是当数据包含多层嵌套或动态键时。通过将数据扁平化并重构为 labels 和 datasets 的标准格式，可以极大地简化 Chart.js 的配置过程。

注意事项：

数据类型一致性: 确保 data 数组中的所有值都是数字类型，否则 Chart.js 可能无法正确渲染或计算。在数据转换时，我们使用了 parseInt(cur[k], 10) 来确保这一点。
数据完整性: 如果某个用户在某个设备上没有数据，确保在构建 datasets 时将其值设置为 0 (或 null，具体取决于你希望 Chart.js 如何处理缺失值)，以保持 data 数组与 labels 数组长度的一致性。
颜色管理: 对于多个堆叠层，为每个层指定清晰且区分度高的颜色非常重要，可以通过预定义的 colorSettings 对象来实现。
响应式设计: 在 options 中设置 responsive: true 可以使图表更好地适应不同屏幕尺寸。

通过遵循本教程中的数据转换和配置步骤，您可以有效地利用 Chart.js 创建出专业且易于理解的分组堆叠条形图，从而更好地展示复杂的数据关系。

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

# 有效地 # 亳州营销推广哪家专业 # 宣传推广与营销 # 阿里巴巴吧SEO # 余姚seo服务收费 # Twitter营销推广方式 # 芦淞区企业营销推广 # 贵阳网站建设主观题 # 今日头条seo分析 # 兰州网站整站优化策略 # seo自我评价 # 命令行 # 关键在于 # 转换为 # javascript # 重构 # 鼠标 # 扁平化 # 遍历 # 条形图 # 数据结构 # red # canva # 响应式设计 # 工具 # go # js # java