前几天我刚注意到,Recharts 的 3.7.0 版本已经正式上线了。这次更新其实有一个挺值得关注的信号:Cell 组件被正式标记为弃用,下一个主版本中就会彻底移除。官方的态度很明确,所有原来用 Cell 的地方,都要迁移到对应图表组件的 shape 属性上。
具体来看,这次更新主要涉及这些方面:
新增功能(Feat)
新增 Hook
useIsTooltipActive:可以判断 Tooltip 当前是否处于激活状态(#6880)useActiveTooltipCoordinate:能够获取当前 Tooltip 所在的坐标位置(#6880)
其他改进
Tooltip的offset属性现在可以接收{ x, y }这样的坐标对象了(#6868)XAxis/YAxis新增了"auto"轴类型(#6823),它会自动识别数据:分类数据就走"category",数值型就走"number"XAxis/YAxis原先的tick: any类型被替换成了更明确、更安全的类型定义(#6911)Bar组件引入了BarShapeProps类型,修复了Bar.shape在 TypeScript 中的类型推导问题(#6900)- TypeScript 层面还补充了一批实用类型导出,比如
shape、content这些函数需要用到的类型(#6852)
问题修复(Fix)
BarChart修复了一个比较隐蔽的问题:当单个数据序列包含三个及以上正值时,stackOffset="sign"模式下图表渲染会出现异常(#6807)BarStack解决了用 Vite 构建项目时触发的循环依赖警告(#6777)BarStack在stackOffset="sign"场景下的clipPath渲染错误也得到了修正(#6806)BarStack还为高亮(active)的条形添加了圆角支持,这样堆叠半径就保持一致了(#6906)
构建与配置(Chore)
- TypeScript 编译选项启用了
strict模式(#6842),类型检查会更严格,对一些潜在隐患的排查是有帮助的。
文档优化(Docs)
这次版本还重点优化了文档建设。大部分文档已经实现了自动化生成,代码注释、官网文档以及 Storybook 示例之间的一致性明显提升了不少。
- 新增了深色主题支持(#6828)
- 所有官网示例都集成了 Recharts 开发者工具,排查问题的时候会方便很多。