SuperAPI AI 工具集

chart

前端与建站

查看项目

更新于 10-16 04:32

技能介绍

用途:该模式用于在界面中实现图表与图形,把定量数据转化为可视化形状,让变化、对比或分布更容易被看出,主要服务于分析与报表类需求。

适用场景:分析与报表、状态与趋势监控、决策支持仪表盘。

不适用:用户只需一两个数值而非完整布局时,应改用更简单的视图;任务本身是创建或编辑而非解读数据时,不宜使用;移动端若其他呈现方式更清晰,不要强行套用同一视图。

实施流程:先确认模式与问题和约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;在叠加视觉打磨前先落实无障碍、性能与交互护栏;用测试指引验证键盘、屏幕阅读器、响应式与失败场景下的行为。

无障碍护栏:键盘方面,确认仅用键盘即可完成图表操作,焦点顺序在打开、更新或展开额外 UI 时保持合理,并保留在高倍缩放下仍可读的可见焦点状态。屏幕阅读器方面,优先使用语义元素,仅在语义不足处补充 ARIA;在正确位置以恰当礼貌程度播报错误、加载、完成等状态变化;必要时用 aria-describedby 或结构化标题关联标签、提示与状态文本。视觉方面,不要仅靠颜色传达严重程度、完成或选中状态。

性能护栏:在添加嵌套操作、图表或内联筛选等更丰富装饰前,先测量默认视图的渲染成本;布局会一次渲染过多条目时,使用分页、窗口化或渐进披露;稳定高度与占位几何,避免加载和数据刷新造成大幅布局偏移。

常见错误:先选布局后定任务,应从用户任务出发,把布局映射到对比、时序、层级或概览需求;忽略非理想状态,应提前设计数据生命周期,包括空、部分、过期与失败结果;只做桌面密度模型,应在实现前定义移动策略,如堆叠卡片、渐进披露或替代摘要。

相关模式:https://uxpatterns.dev/patterns/data-display/dashboard、https://uxpatterns.dev/patterns/data-display/statistics、https://uxpatterns.dev/patterns/data-display/table。完整实现细节、示例与测试说明见 references/pattern.md,模式页面:https://uxpatterns.dev/patterns/data-display/chart。