DATA VISUALIZATION
图表卡片容器Chart Card Container
图表不裸奔——套一层带标题、大数字和时间筛选的"壳"，才是仪表盘的单元。
效果预览
月收入趋势近 30 天 ▾
¥128,400
▲ 12.4% vs 上月
适合用在哪
仪表盘、报表页、数据大屏的每个图块。
容易踩的坑
- 卡片标题用 div 而非 h2/h3，仪表盘上读屏无法按标题快速跳转各图块。
- 多张卡片同时挂载图表库，首屏一次初始化十几个实例，交互可用时间超过 3 秒。
- 时间范围切换只刷新图表不刷新 KPI 数字，两者数据口径对不上。
设计提示词 · Prompt
图表卡片容器（Chart Card Container）：标准结构——头部：左标题（14px 650 字重）+ 副标题时间范围（11px 灰），右侧操作区（时间范围分段控制器 / 导出图标 / ⋯ 菜单）；主体：大号 KPI 数字 + 涨跌徽章 + 图表本体；底部可选：数据来源说明。卡片白底 + 1px 描边 + 14-16px 圆角 + 内边距 16-20px。一个卡片只回答一个问题。KPI 与图表的颜色语义必须一致（涨绿跌红全站统一）。骨架屏占位、空数据态、错误态都要设计。
Chart Card Container: standard structure — header: title on the left (14px, weight 650) + subtitle with the time range (11px gray), action area on the right (time-range segmented control / export icon / ⋯ menu); body: a large KPI number + change badge + the chart itself; optional footer: data source note. White card + 1px border + 14-16px radius + 16-20px padding. One card answers only one question. Color semantics for KPI and chart must match (green up / red down consistently site-wide). Design skeleton placeholders, empty-data states, and error states too.
常见搭配
同一页面里经常和「图表卡片容器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-chartcard">
<div class="d-chartcard__hd">
<b>月收入趋势</b><span class="d-tiny">近 30 天 ▾</span>
</div>
<div class="d-chartcard__bd">
<div><div class="d-chartcard__big">¥128,400</div><div class="d-chartcard__up">▲ 12.4% vs 上月</div></div>
<svg viewBox="0 0 84 30" width="84" height="30"><path d="M2,26 L14,22 L26,24 L38,16 L50,19 L62,10 L82,4" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round"/></svg>
</div>
</div>