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.tsx）：

import { Line, LineChart } from 'recharts'; export default function ChartWithoutSize() { return ( <LineChart data={[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} > <Line dataKey="y" /> </LineChart> ); }

文档说明这种行为："Recharts chart needs width or height specified to render a chart. Chart without any sizes does not render anything." 如果你的图表就是这种写法且页面为空白，问题就在这里。

修复方式是给图表补上静态尺寸，最简单的写法是直接用像素数值（对应 StaticDimensionChart.tsx）：

<LineChart width={200} height={200} data={[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} > <Line dataKey="y" /> </LineChart>

也可以只用百分比指定其中一侧尺寸（对应 SizeInPercentChart.tsx）：

<LineChart width="20%" height={100} data={[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} > <Line dataKey="y" /> </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 dataKey="y" /> </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.tsx）：

<LineChart style={{ width: '100%', maxWidth: '400px', maxHeight: '80vh', aspectRatio: 1.618 }} responsive data={[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} > <Line dataKey="y" /> </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: 400px：

<div style={{ height: '400px' }}> <ResponsiveContainer width="100%" maxHeight={400}> <LineChart data={[ { x: 1, y: 1 }, { x: 2, y: 4 }, ]} > <Line dataKey="y" /> </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。

这部分属于容器布局相关的可选分支，核心仍是上一节的两条规则：图表要拿到尺寸，需要跟随变化时开启responsive（3.3+）或包裹ResponsiveContainer（更低版本）。

参考来源

• 指南正文（Chart size）：www/src/components/GuideView/ChartSizing/index.tsx
• 各场景示例组件：ChartWithoutSize.tsx、StaticDimensionChart.tsx、SizeInPercentChart.tsx、SizeInStyleChart.tsx、ResponsiveChart.tsx、ResponsiveContainerResponsiveChart.tsx
• ResponsiveContainer的完整示例（含aspect属性用法）：ResponsiveContainerExample.tsx

说明：仓库示例组件中出现的RechartsDevtools来自@recharts/devtools包，是开发调试用的组件，与本文的排查主题无关，未安装该包的读者可以连同 import 一起删掉。

【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts