必须用Canvas/SVG或Chart.js等库实现堆叠柱状图，因纯HTML无法处理坐标系、响应数据和交互；Chart.js需配置scales.y.stacked=true、各dataset的stack值完全一致、labels与data长度匹配。

HTML 仪表盘里加堆叠柱状图，不能靠纯 HTML 标签拼——

没有坐标系、不响应数据、无法交互。必须用 或 渲染，或引入轻量图表库；Chart.js 是最稳妥的选择，尤其在仪表盘场景下兼顾开发效率与可维护性。

为什么不用 CSS + div 堆叠

很多人试过用多个

垂直排列模拟堆叠效果，但实际在仪表盘中会立刻暴露问题：

• 高度靠百分比计算时，父容器必须有固定 height，而仪表盘常使用 flex/grid 自适应布局，容易塌陷或错位
• 没有 y 轴刻度、无 tooltip、无法 hover 查看分段值，用户根本不知道“蓝色这块占多少”
• 数据更新需手动重算所有 height 和 top/bottom，JS 逻辑极易出错
• 移动端缩放后，文字和条形比例失真，且无法导出 PNG 或打印

Chart.js 实现堆叠柱状图的关键配置

仪表盘里用 Chart.js，核心不是“怎么画”，而是“怎么配对”：漏掉任一配置项，堆叠就失效，柱子会并排显示而非上下堆叠。

• scales.y.stacked 必须设为 true（默认是 false）
• 每个 datasets 的 stack 属性值要完全一致，比如都写 stack: 'sales'；如果一个写 'sales'、另一个没写或写 'default'，它们就不会堆在一起
• labels 数组长度必须和每个 data 数组长度一致，否则渲染报错 Uncaught Error: labels array is not same length as data array
• 若需多组堆叠（如按季度分销售/成本/利润），每组用不同 stack 名，但同一组内保持一致

目标进度型堆叠图（如“完成 vs 剩余”）的数据预处理

仪表盘常见需求：一根柱子显示「已完成量」+「距目标还差多少」，且当完成量 ≥ 目标时，「还差」部分自动消失。这不靠 Chart.js 自动判断，而靠 JS 预计算：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 假设有原始数据 [45, 62, 38]，目标值 target = 60
• 「已完成」数据集直接用原值：[45, 62, 38]
• 「剩余」数据集需逐项计算：Math.max(0, target - value) → [15, 0, 22]
• 这样当某项超目标（如 62），对应剩余值为 0，Chart.js 绘制时该段高度为 0，视觉上自然隐藏
• 注意：两个数据集的 stack 值必须相同，否则不会叠加到同一根柱上

真正容易被忽略的是 stack 名的一致性——它不像颜色或 label 那样直观可见，错一个字母或空格，整组堆叠就退化成普通柱状图，而控制台通常不报错。仪表盘上线后才发现柱子没堆起来，往往得翻三遍配置才定位到这个小字符串。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！