图表Chart

图表随问题换形状：切类型、切数据，看物件重绘

亲手切「类型」（柱 / 线 / 饼）和「数据集」（本周 / 本月 / 全年），悬停或聚焦任意一点——观察图表物件、图例、读数条与文字表怎样一起重绘，而不是只看底部说明。

面板教会的知识点

把刚才在物件上看到的现象命名为六条规则。

• 图形随类型与数据重绘：柱 / 线 / 饼回答不同问题——比较大小看柱、连续趋势看线、占总和看饼；切数据集时坐标、图例、文字表一起换。
• 图形不独撑读数：精确值要落在柱顶数值、活跃点读数条和文字表上；色弱用户只看明度也能读出数字与占比。
• 颜色不独撑含义：饼图切片用单调灰阶明度区分，加上图例文字和百分比；柱 / 线只有单一 ink 系列，活跃点靠明度加粗，不靠色相。
• 饼图看份额不看趋势：把时间序列切成饼，末段回落会被吞成份额；切片超过 6 个还要合并成「其他」，否则明度难辨。
• 加载 / 失败是独立状态：失败时画布换成「原因 + 上次成功时间 + 重试」，不空白坐标、不伪装成 0；重试保留当前口径与筛选。
• 主操作固定成结果物件：「导出报告」生成带文件名、口径、最新值与合计的报告卡，可撤销——把当前口径冻结成可复核的产物，不是一次性 toast。

什么时候用图表

从「读者要回答什么问题」判断，而不是看数据多不多。

怎么用：从问题到读数路径

一次到位的检查顺序，盯这些不放过。

1. 定问题：先写清读者要回答「趋势 / 比较 / 构成」中的哪一个，再选类型。
2. 定类型：趋势优先折线或柱；比较大小用柱；占总和用饼，且切片不超过 5—6 个。
3. 定数值路径：每个点都能用柱顶标签、tooltip 或文字表读到精确值与单位，不只靠柱高估。
4. 定口径文字：指标名、单位、时间范围与去重方式写在图表旁边，与坐标同步切换。
5. 定无障碍：图表给 aria-label 摘要，配可见文字表或图例；颜色之外用明度、形状、文字区分系列。
6. 定状态：加载用骨架保留指标名，空数据写原因，失败给原因与重试；验证色弱与窄屏。

正反例：同一份「近 7 天访问量」

只改一个关键判断——图形之外是否给到数值与口径。