必须用Canvas/SVG或Chart.js等库实现堆叠柱状图，因纯HTML无法处理坐标系、响应数据和交互；Chart.js需配置scales.y.stacked=true、各dataset的stack值完全一致、labels与data长度匹配。
HTML 仪表盘里加堆叠柱状图，不能靠纯 HTML 标签拼——<div> 没有坐标系、不响应数据、无法交互。必须用 <code><canvas></canvas> 或 <svg></svg> 渲染，或引入轻量图表库；Chart.js 是最稳妥的选择，尤其在仪表盘场景下兼顾开发效率与可维护性。
为什么不用 CSS + div 堆叠
很多人试过用多个 <div> 垂直排列模拟堆叠效果，但实际在仪表盘中会立刻暴露问题：<ul>
<li>高度靠百分比计算时，父容器必须有固定 <code>height，而仪表盘常使用 flex/grid 自适应布局，容易塌陷或错位
height 和 top/bottom，JS 逻辑极易出错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 预计算：
立即学习“前端免费学习笔记（深入）”；
- 假设有原始数据
[45, 62, 38]，目标值target = 60 - 「已完成」数据集直接用原值：
[45, 62, 38] - 「剩余」数据集需逐项计算：
Math.max(0, target - value)→[15, 0, 22] - 这样当某项超目标（如 62），对应剩余值为 0，Chart.js 绘制时该段高度为 0，视觉上自然隐藏
- 注意：两个数据集的
stack值必须相同，否则不会叠加到同一根柱上
真正容易被忽略的是 stack 名的一致性——它不像颜色或 label 那样直观可见，错一个字母或空格，整组堆叠就退化成普通柱状图，而控制台通常不报错。仪表盘上线后才发现柱子没堆起来，往往得翻三遍配置才定位到这个小字符串。
