用途:为仪表盘、报表和数据驱动界面提供系统化的数据可视化选型与实现指导,把原始数据转化为能揭示模式、趋势与洞察的图形。
主要能力:提供选择框架(数据类型+分析目的→图表类型);按分析目的组织 24+ 可视化方法,如比较用条形图/棒棒糖图,趋势用折线图/面积图,分布用直方图/小提琴图/箱线图,关系用散点图/气泡图,构成用矩形树图/堆叠条形图/饼图(不超过6块),流向用桑基图/和弦图,层级用旭日图/树状图,地理用分级统计图/符号地图;并分三层目录(基础图元、目的驱动、进阶图表)。
使用方式:按六步工作流——评估数据(类型、维度、点数)、确定目的、选择图表、实现、应用无障碍、优化性能。快速选择示例:比较5-10个类别用条形图,展示12个月销售用折线图,年龄分布用直方图或小提琴图,探索相关性用散点图,预算构成用矩形树图或堆叠条形图。实现层面给出 JavaScript/TypeScript(Recharts、D3.js、Plotly)与 Python(Plotly、Matplotlib、Seaborn、Altair)的库建议,例如 npm install recharts、npm install d3、npm install react-plotly.js plotly.js。可与设计令牌集成,使用 --chart-color-primary、--chart-color-1 至 --chart-color-10 等变量适配明暗与高对比主题。
无障碍与性能:要求文本替代(aria-label)、非文本元素至少3:1对比度、文本4.5:1、不单靠颜色区分、使用色盲友好配色(推荐 IBM 调色板 #648FFF、#785EF0、#DC267F、#FE6100、#FFB000,避免红绿组合),并支持键盘导航。性能按数据量分级:<1000 点用标准 SVG 直接渲染,1K-10K 采样或聚合,10K-100K 改用 Canvas,>100K 服务端聚合。
适用场景与限制:适合需要图表、图形或可视化分析的仪表盘、报表与数据界面。常见误区包括图表优先思维、超过6类用饼图、双轴图、2D 足够时用3D、彩虹色阶、截断 y 轴、颜色过多、缺少坐标轴标签与单位。资料未提供具体收费、价格与平台支持信息。