柱状图（Bar Chart）是什么：效果预览与 AI 设计提示词

效果预览

5月6月7月8月9月

适合用在哪

数据总览、月度对比、排行榜、报表页。

容易踩的坑

Y 轴不从 0 开始，柱高差被放大数倍，用户会误判差异程度。
图表没有 aria-label 或隐藏数据表，读屏用户拿不到任何一个数值。
数值标签只在 hover 显示，触屏设备上除最高柱外全部无法查看。

设计提示词 · Prompt

柱状图（Bar Chart）：SVG 或 div 均可。柱子顶部圆角 4-6px（只圆上两角）、宽度均匀、间距为柱宽的 50-80%。用渐变填充（上浅下深）增加质感；需要强调的柱子换对比色（品牌紫 vs 其他浅灰紫），并配数值标签。Y 轴基线 1px 灰线，X 轴标签 10-11px 灰色。进场动画：柱子 scaleY 0→1、transform-origin:bottom、stagger 40-60ms。柱子 7 根以内信息最清晰。数据标签只在 hover 或最高柱显示，避免满屏数字。

Bar Chart: SVG or div both work. Bar tops rounded 4-6px (only the top two corners), uniform width, spacing 50-80% of the bar width. Use a gradient fill (lighter at top, darker at bottom) for texture; switch the bar you want to emphasize to a contrasting color (brand purple vs light grayish purple for the others) with a value label. Y-axis baseline is a 1px gray line; X-axis labels 10-11px gray. Entrance animation: bars scaleY 0→1, transform-origin:bottom, stagger 40-60ms. Information is clearest with 7 bars or fewer. Show data labels only on hover or on the tallest bar to avoid a screen full of numbers.

常见搭配

同一页面里经常和「柱状图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

图表卡片容器Chart Card Container 工具提示Tooltip 骨架屏Skeleton Loading

演示 HTML 结构

<div class="s d-barchart">
  <div class="d-bar__plot">
    <div class="d-bar__col d-bar__col--dim" style="height:34%"></div>
    <div class="d-bar__col d-bar__col--dim" style="height:52%"></div>
    <div class="d-bar__col" style="height:66%;animation-delay:.1s"></div>
    <div class="d-bar__col d-bar__col--dim" style="height:44%"></div>
    <div class="d-bar__col d-bar__col--hot" style="height:92%;animation-delay:.2s"></div>
  </div>
  <div class="d-bar__labels"><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span></div>
</div>