Recharts Cell 组件将移除4.0 前如何迁移到 shape 属性【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts如果你的 Recharts 图表里还在用Cell给每个柱子、扇区或散点单独着色这篇迁移说明就是为你写的。Recharts 官方已将Cell标记为废弃源码中它被标注为 “This component is now deprecated and will be removed in Recharts 4.0”官方文档同时明确 “TheCellcomponent is deprecated and will be removed in version 4.0. Please avoid using it in new projects and consider refactoring existing code to eliminate its usage.” 迁移目标很明确不再向图表组件塞Cell子节点而是改用对应组件的shape图形元素或content标签等内容元素属性传入自己的自定义组件在其中按props.index设置静态或动态样式。为什么 Recharts 要移除 Cell废弃说明CellDeprecationNotice给出了两个原因Cell是库中最后一处依赖react-is的代码移除它可以彻底去掉这个依赖Cell的属性随上下文变化作为Bar的子节点时读的是Rectangle属性作为Pie的子节点时读的又是Sector属性。这是 TypeScript 无法为一个组件正确建模的官方无法把它类型化。迁移指南的结论是“All relevant components should now have ashapeorcontentprop that allows you to provide your own component. Inside of that component, set whichever props - static or dynamic - that you wish.” 也就是说原来写在每个Cell fill...上的样式现在集中写进一个组件函数里用props.index区分每个元素。迁移基本形态以 src/component/Cell.tsx 的 JSDoc 为准确认迁移方式/** * This component is now deprecated and will be removed in Recharts 4.0. * * Please use the shape prop or content prop on the respective chart components * to customize the rendering of chart elements instead of using Cell. * * deprecated */ export const Cell: FunctionComponentProps (_props: Props) null;注意最后一行当前代码库中Cell的渲染结果已经是null。这意味着在当前开发版里Cell子节点实际上已不产生渲染内容逐元素样式必须完全来自shape/content。4.0 之后这个组件本身也将被删除届时连Cell的导入都会失效。迁移后的统一形态是定义一个接收该图表元素属性的组件传给图表的shape属性。官方文档中的迁移示例都遵循这一模式下面按图表类型给出。Bar用 shape 替代逐柱着色官方示例 CellBarExample 展示的就是“原来用 Cell、现在改用 shape”的迁移结果文档说明该示例 originally used the Cell component现已迁移import { BarChart, Bar, Rectangle, BarShapeProps } from recharts; const data [ { name: Group A, value: 400 }, { name: Group B, value: 300 }, { name: Group C, value: 500 }, { name: Group D, value: 200 }, { name: Group E, value: 278 }, { name: Group F, value: 189 }, ]; const colors [#8884d8, #83a6ed, #8dd1e1, #82ca9d, #a4de6c, url(#pattern-checkers)]; const MyCustomRectangle (props: BarShapeProps) { return Rectangle {...props} fillnone stroke{colors[props.index]} strokeWidth{props.index 2 ? 4 : 1} /; }; const CellBarExample ({ isAnimationActive true }: { isAnimationActive?: boolean }) ( BarChart style{{ width: 100%, maxWidth: 700px, maxHeight: 70vh, aspectRatio: 1.618 }} responsive data{data} Bar dataKeyvalue isAnimationActive{isAnimationActive} shape{MyCustomRectangle} / /BarChart );关键点Bar dataKeyvalue shape{MyCustomRectangle} /替代了原来在Bar下逐柱写Cell的写法MyCustomRectangle的类型是BarShapeProps通过props.index拿到当前柱的序号从而还原“每柱一个颜色”的效果这里用内置Rectangle包了一层并改fill、stroke你也可以返回任意 SVG 内容。Pie扇区 shape 加 LabelList 的 content 属性Pie 示例 同时演示了shape和content两种替代路径——逐扇区着色用shape逐标签着色用LabelList的contentimport { PieChart, Pie, Sector, PieSectorShapeProps, Label, LabelList, LabelProps } from recharts; const data [ { name: Group A, value: 400 }, { name: Group B, value: 300 }, { name: Group C, value: 500 }, { name: Group D, value: 200 }, { name: Group E, value: 278 }, { name: Group F, value: 189 }, ]; const colors [#8884d8, #83a6ed, #8dd1e1, #82ca9d, #a4de6c, url(#pattern-checkers)]; const MyCustomPie (props: PieSectorShapeProps) Sector {...props} fill{colors[props.index % colors.length]} /; const MyCustomLabel (props: LabelProps) ( Label {...props} fill{colors[(props.index ?? 0) % colors.length]} positionoutside offset{20} / ); const CellPieExample ({ isAnimationActive true }: { isAnimationActive?: boolean }) ( PieChart style{{ width: 100%, maxWidth: 500px, maxHeight: 70vh, aspectRatio: 1 }} responsive defs pattern idpattern-checkers x0 y0 width10 height10 patternUnitsuserSpaceOnUse rect classNamechecker x0 width5 height5 y0 / rect classNamechecker x10 width5 height5 y10 / /pattern /defs Pie data{data} isAnimationActive{isAnimationActive} shape{MyCustomPie} LabelList content{MyCustomLabel} / /Pie /PieChart );对照原来的 Cell 写法映射关系是原 Cell 用法迁移后写法Pie下逐扇区Cell fill... /Pie shape{MyCustomPie} /MyCustomPie接收PieSectorShapeProps内部渲染Sector {...props} fill... /逐标签自定义颜色LabelList content{MyCustomLabel} /MyCustomLabel接收LabelProps内部渲染Label {...props} fill... /两个细节值得注意fill取colors[props.index % colors.length]时用了取模颜色数量少于数据项时不会越界示例里的url(#pattern-checkers)表示逐元素的填充也可以是defs中定义的渐变或 pattern和原来Cell能做到的范围一致。Scatter自定义散点符号Scatter 示例 展示散点场景的迁移import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ScatterShapeProps, Symbols, SymbolType, } from recharts; const data [ { x: 100, y: 200, z: 200 }, { x: 120, y: 100, z: 260 }, { x: 170, y: 300, z: 400 }, { x: 140, y: 250, z: 280 }, { x: 150, y: 400, z: 500 }, { x: 110, y: 280, z: 200 }, ]; const COLORS [#0088FE, #00C49F, #FFBB28, #FF8042, red, pink]; const SYMBOLS: ReadonlyArraySymbolType [circle, cross, diamond, square, star, triangle, wye]; const MyCustomSymbol (props: ScatterShapeProps) ( Symbols {...props} size{300} fill{COLORS[props.index % COLORS.length]} type{SYMBOLS[props.index % SYMBOLS.length]} / ); export default function ScatterChartWithCells() { return ( ScatterChart style{{ width: 100%, maxWidth: 700px, maxHeight: 70vh, aspectRatio: 1.618 }} responsive margin{{ top: 20, right: 0, bottom: 0, left: 0 }} CartesianGrid / XAxis typenumber dataKeyx namestature unitcm / YAxis typenumber dataKeyy nameweight unitkg widthauto / Tooltip / Scatter nameA school data{data} shape{MyCustomSymbol} / /ScatterChart ); }这里MyCustomSymbol用props.index同时决定颜色和符号类型覆盖的是Cell时代“按序号换色”的能力符号类型本身则来自Scatter支持的SymbolType。自定义几何形状加自定义标签TriangleBar 示例如果你原来借助Cell体系做更复杂的逐元素渲染CustomShapeBarChart 展示了 shape 组件里可以自由返回任意 SVGconst getPath (x: number, y: number, width: number, height: number) { return M${x},${y height}C${x width / 3},${y height} ${x width / 2},${y height / 3} ${x width / 2}, ${y} C${x width / 2},${y height / 3} ${x (2 * width) / 3},${y height} ${x width}, ${y height} Z; }; const TriangleBar (props: BarShapeProps) { const { x, y, width, height, index } props; const color colors[index % colors.length]; return ( path strokeWidth{props.isActive ? 5 : 0} d{getPath(Number(x), Number(y), Number(width), Number(height))} stroke{color} fill{color} style{{ transition: stroke-width 0.3s ease-out }} / ); }; const CustomColorLabel (props: LabelProps) { const fill colors[(props.index ?? 0) % colors.length]; return Label {...props} fill{fill} /; }; BarChart data{data} responsive CartesianGrid / Tooltip cursor{{ fillOpacity: 0.5 }} / XAxis dataKeyname / YAxis widthauto / Bar dataKeyuv shape{TriangleBar} activeBar LabelList content{CustomColorLabel} positiontop / /Bar /BarChart这个示例额外说明了两点shape组件能拿到x、y、width、height等几何属性可以完全重写渲染这里是三角形柱props.isActive标记当前是否处于激活态悬停等可以用它做激活态样式。Pie 的 activeShape 与 inactiveShape 同样已废弃如果你还依赖Pie的activeShape/inactiveShape做激活/非激活扇区src/polar/Pie.tsx 中的属性注释显示它们同样被标记为废弃activeShapedeprecated Use the shape prop to create each sector. isActive designates the active shape.inactiveShapedeprecated Use the shape prop to modify each sector.也就是说统一做法是把激活态与非激活态的区分放进同一个shape组件用props.isActive分支处理TriangleBar 示例中的strokeWidth{props.isActive ? 5 : 0}就是这一写法。迁移后如何验证官方文档中的四个迁移示例Pie、Bar、Scatter、自定义 Bar均标注为“used to use the Cell component, and now they are all migrated to shape instead”并在线上文档中以带代码编辑器的实时预览呈现可以直接观察迁移后每个元素的颜色、描边、标签是否与预期一致对照迁移前后的图表渲染逐元素颜色、按props.index的差异化样式、激活态高亮均应保持与 Cell 版本一致检查代码中不再有Cell子节点导入与使用。当前代码库中Cell渲染结果为null保留它不会报错但样式不会生效——如果迁移后发现颜色“丢了”先确认样式是否已经全部移入shape/content组件。限制与下一步Cell在 4.0 之前仍会保留当前版本只是废弃且不再渲染不会立即破坏构建但它已不参与渲染任何仍指望Cell fill...生效的代码在当前版本下已经无效应尽快迁移官方明确建议新项目不要再引入Cell“Please avoid using it in new projects”如果shape/content方案覆盖不了你的用例官方文档的指引是向 Recharts 项目提交 Issue 反馈而不是回退使用Cell。参考资料仓库内路径废弃说明页面Cell 源码Pie 的 shape 替代属性说明Bar 迁移示例Pie 迁移示例Scatter 迁移示例自定义形状 Bar 示例【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考