DATA VISUALIZATION
堆叠条形图Stacked Bar
一根条里分几段颜色，各段代表组成部分——"钱都花哪儿了"的最佳表达。
效果预览
适合用在哪
流量构成、预算构成、时间分配、多系列对比。
容易踩的坑
- 多行堆叠条各段颜色顺序不一致，用户每行都要重新对照图例。
- 小于 3% 的段宽度不足 2px，hover 根本触发不到，数值无法查看。
- 段内百分比文字未判断宽度就渲染，窄段文字溢出与相邻段重叠。
设计提示词 · Prompt
堆叠条形图（Stacked Bar）：一根 12-16px 高的圆角条按占比横切分段，段间距 2px 或无缝，各段颜色取同色系深浅或分类色板。每行一个维度（如每月一行），行左标签右数值。配图例（色块 + 名称）。hover 显示各段精确值。段数超过 5 段可读性崩塌——小占比合并为"其他"。与 100% 堆叠（比较构成）和绝对值堆叠（比较总量）是两个用途，先想清楚。段内可放百分比文字（段够宽时）。
Stacked Bar: a rounded bar 12-16px tall sliced horizontally into segments by share, with 2px gaps between segments or seamless, each segment colored from shades of one color family or a categorical palette. One dimension per row (e.g. one row per month), label on the left and value on the right. Add a legend (color swatch + name). Hover shows each segment's exact value. Beyond 5 segments readability collapses — merge small shares into "Other". 100% stacking (comparing composition) and absolute stacking (comparing totals) serve two different purposes; decide first. Percentage text can go inside a segment (when it's wide enough).
常见搭配
同一页面里经常和「堆叠条形图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-stackbar">
<div class="d-stackbar__row">
<div class="d-stackbar__cap"><span>开发时间分配</span><span>40h / 周</span></div>
<div class="d-stackbar__track">
<span class="d-stackbar__seg" style="width:38%;background:#4f46e5"></span>
<span class="d-stackbar__seg" style="width:27%;background:#818cf8;animation-delay:.08s"></span>
<span class="d-stackbar__seg" style="width:20%;background:#c026d3;animation-delay:.16s"></span>
<span class="d-stackbar__seg" style="width:15%;background:#e9eaef;animation-delay:.24s"></span>
</div>
</div>
<div class="d-stackbar__legend">
<span><i style="background:#4f46e5"></i>写代码 38%</span>
<span><i style="background:#818cf8"></i>评审 27%</span>
<span><i style="background:#c026d3"></i>会议 20%</span>
<span><i style="background:#e9eaef"></i>其他 15%</span>
</div>
</div>