本教程详细介绍了如何在 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 分组堆叠柱状图 #myChart { max-width: 800px; margin: 20px auto; } // 原始数据 const alldata = [ { device: "Laptop", values: [ { amckinlay: '30' }, { cvu: '150' } ] }, { device: "Phone", values: [ { amckinlay: '100' } ] } ]; // 1. 提取 X 轴标签（设备名称） const labels = alldata.map((x) => x.device); // 2. 扁平化并标准化数据 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(); // 3. 识别堆叠类别（用户名称） const subLabels = [...new Set(transformedData.map((x) => x.category))]; // 定义每个类别的颜色设置 const colorSettings = [ { category: 'amckinlay', backgroundColor: 'rgba(75, 192, 192, 0.6)', }, { category: 'cvu', backgroundColor: 'rgba(255, 99, 132, 0.6)', }, ]; // 4. 构建 Chart.js 数据集 (datasets) const datasets = subLabels.reduce((acc, currentCategory) => { const categoryData = []; for (let device of labels) { 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; }, []); // 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, // 响应式布局 scales: { x: { stacked: true, // X 轴堆叠 }, y: { stacked: true, // Y 轴堆叠 beginAtZero: true // Y 轴从0开始 }, }, plugins: { title: { display: true, text: '设备用户点数分组堆叠柱状图' } } }, });
注意事项
数据完整性： 确保所有可能的类别在 colorSettings 中都有对应的颜色定义，以避免图表样式缺失。零值处理： 在构建 datasets 时，对于某个类别在特定分组下没有数据的情况，我们将其值设置为 0。这是确保 data 数组长度与 labels 匹配，并正确显示堆叠图的关键。响应式设计： responsive: true 选项可以使图表在容器大小变化时自动调整。数据类型： 确保所有数值数据都已正确转换为数字类型，例如使用 parseInt() 或 parseFloat()。
总结
通过上述步骤，我们成功地将复杂的原始数据转换为 Chart.js 所需的格式，并配置了一个功能完善的分组堆叠柱状图。核心在于理解 Chart.js 的数据模型，并通过数据转换逻辑将原始数据适配到这个模型中。掌握数据预处理和 Chart.js 配置中的 stacked 选项，是实现此类高级图表的关键。
以上就是Chart.js 实现分组堆叠柱状图：数据转换与配置详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536352.html
微信扫一扫 
支付宝扫一扫 
