SuperAPI AI 工具集

recharts-patterns

通用与其它

查看项目

更新于 10-16 01:11

技能介绍

用途:为 React 应用提供 Recharts 3.x(基于 React 与 D3 的可组合图表库)的数据可视化模式参考,适用于构建仪表盘、报表与实时监控图表。

主要能力:覆盖折线图、柱状图、饼图/环形图、带渐变的面积图等核心图表类型;支持响应式容器、自定义 Tooltip、动画与无障碍标注。示例包含用 ResponsiveContainer 包裹图表、用 Cell 为饼图分片着色、用 linearGradient 定义面积图渐变、用 figure/aria-label/figcaption 提升可访问性,以及通过 refetchInterval 实现实时更新。

使用方式:从 recharts 导入所需组件(如 LineChart、BarChart、PieChart、AreaChart、XAxis、YAxis、Tooltip、Legend、ResponsiveContainer 等),传入数据数组并组合子组件;自定义 Tooltip 通过 content={<CustomTooltip />} 注入;实时图表配合数据请求的轮询间隔刷新。

性能与限制:建议限制数据点数量(如 MAX_POINTS = 500)、多点时设置 dot={false}、用 useMemo 缓存计算、实时场景关闭动画(isAnimationActive={false})。反模式包括:ResponsiveContainer 的父元素无高度、在 ResponsiveContainer 上使用固定尺寸、实时图表开启动画、在渲染中内联定义数据、不限制数据点数量。

适用场景:仪表盘、销售/流量/设备占比等业务图表、需要品牌化 Tooltip 与无障碍支持的 React 项目。

暂未提供:具体安装命令、版本兼容细节、收费与平台信息。