Recharts 图表不显示怎么排查？父容器尺寸与 responsive 属性是常见原因

Recharts 图表不显示怎么排查父容器尺寸与 responsive 属性是常见原因【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts用 recharts 渲染图表时如果页面上对应位置一片空白或者图表只在首次渲染时出现、之后不跟随页面变化先检查尺寸。recharts 官网的 Chart size 指南明确说明图表必须指定 width 或 height 才能渲染Chart without any sizes does not render anything——即完全没有尺寸设置的图表不会渲染出任何内容。本文沿着这条指南给出一条从图表不显示到修复、验证的连续排查路径。第一步图表组件上有没有 width / height对照你项目中的图表写法先排除最简单的情况图表组件既没有width/height属性也没有通过style设置尺寸。文档中给出的最小复现示例对应 ChartWithoutSize.tsximport { Line, LineChart } from recharts; export default function ChartWithoutSize() { return ( LineChart data{[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} Line dataKeyy / /LineChart ); }文档说明这种行为Recharts chart needs width or height specified to render a chart. Chart without any sizes does not render anything. 如果你的图表就是这种写法且页面为空白问题就在这里。修复方式是给图表补上静态尺寸最简单的写法是直接用像素数值对应 StaticDimensionChart.tsxLineChart width{200} height{200} data{[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} Line dataKeyy / /LineChart也可以只用百分比指定其中一侧尺寸对应 SizeInPercentChart.tsxLineChart width20% height{100} data{[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} Line dataKeyy / /LineChart还有一种做法是通过style属性设置 CSS 尺寸对应 SizeInStyleChart.tsx。指南中建议设置maxWidth和maxHeight来限制图表在大屏幕上的尺寸用width: 100%让图表响应式并用aspectRatio保持宽高比LineChart style{{ width: 100%, maxWidth: 400px, maxHeight: 80vh, aspectRatio: 1.618, }} responsive data{[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} Line dataKeyy / /LineChart注意上面这段同时带上了responsive属性这一点在下一节展开。第二步图表是否不跟随父容器尺寸变化文档描述的另一类现象是图表能渲染出来但chart is rendered once, and does not resize when the parent dimensions change——只渲染一次父容器尺寸变化时不会跟着变。文档建议的验证动作是手动改变父容器尺寸来观察Try to resize your browser window, or rotate your phone/tablet to see the effect (or lack of it). 也就是拖动浏览器窗口改变大小或者旋转手机/平板看图表是否跟随变化如果完全不动说明缺了响应式能力。修复方式是给图表组件传responsive属性文档说明This will make the chart resize when the parent dimensions change。文档同时注明版本边界这个属性从 Recharts 3.3 开始提供。对应示例ResponsiveChart.tsxLineChart style{{ width: 100%, maxWidth: 400px, maxHeight: 80vh, aspectRatio: 1.618 }} responsive data{[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} Line dataKeyy / /LineChart修复后用同样的动作验证再次拖动浏览器窗口或旋转设备图表尺寸应随之变化。版本低于 3.3 时改用 ResponsiveContainer并确保父容器有明确尺寸如果你的 recharts 版本低于 3.3拿不到responsive属性文档给出的替代方案是使用ResponsiveContainer组件It is not quite as flexible as the responsive prop, but it works.这里有一个容易踩的边界条件文档特别强调ResponsiveContainer的父元素必须有明确尺寸the ResponsiveContainer component must have a parent with a defined size。对应示例ResponsiveContainerResponsiveChart.tsx中外层div通过 style 设置了height: 400pxdiv style{{ height: 400px }} ResponsiveContainer width100% maxHeight{400} LineChart data{[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} Line dataKeyy / /LineChart /ResponsiveContainer /div如果你用ResponsiveContainer后图表仍然不显示按这个条件检查外层父级元素是否通过 CSS 或 style 拿到了确定的宽高。在 flexbox / CSS grid 布局中的图表如果你的图表放在 flex 或 grid 容器里指南指出可以直接通过 flex 属性控制图表的尺寸和行为——设置在图表父元素上或通过图表自身的style设置flexbox 场景的完整示例见文档中链接的 PieChartInFlexbox 示例responsive属性在 CSS grid 布局中同样适用You can place charts in grid cells and they will adapt to the size of the cell对应示例为 PieChartInGrid。这部分属于容器布局相关的可选分支核心仍是上一节的两条规则图表要拿到尺寸需要跟随变化时开启responsive3.3或包裹ResponsiveContainer更低版本。参考来源指南正文Chart sizewww/src/components/GuideView/ChartSizing/index.tsx各场景示例组件ChartWithoutSize.tsx、StaticDimensionChart.tsx、SizeInPercentChart.tsx、SizeInStyleChart.tsx、ResponsiveChart.tsx、ResponsiveContainerResponsiveChart.tsxResponsiveContainer的完整示例含aspect属性用法ResponsiveContainerExample.tsx说明仓库示例组件中出现的RechartsDevtools来自recharts/devtools包是开发调试用的组件与本文的排查主题无关未安装该包的读者可以连同 import 一起删掉。【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考