Recharts雷达图报错：<line>属性x1值为NaN的问题排查

数据结构 #

[
  {N_DNA: 2, T_DNA: 1, T_RNA: 3, subject: "A1"},
  {N_DNA: 1, T_DNA: 3, T_RNA: 2, subject: "A2"},
  {N_DNA: 4, T_DNA: 4, T_RNA: 1, subject: "B1"},
  {N_DNA: 6, T_DNA: 8, T_RNA: 7, subject: "B2"}
]

实现代码 #

<ResponsiveContainer width={"95%"} height={"100%"}>
  <RadarChart
      cx={300}
      cy={250}
      outerRadius={150}
      width={500}
      height={500}
      data={data}
  >
      <PolarGrid />
      <PolarAngleAxis dataKey="subject" />
      <PolarRadiusAxis />
      <Radar
          name="Mike"
          dataKey="N_DNA"
          stroke="red"
          fill="none"
          fillOpacity={0.3}
      />
      <Radar
          name="Jake"
          dataKey="T_DNA"
          stroke="blue"
          fill="none"
          fillOpacity={0.3}
      />
      <Radar
          name="Jake"
          dataKey="T_RNA"
          stroke="green"
          fill="none"
          fillOpacity={0.3}
      />
  </RadarChart>
</ResponsiveContainer>

问题描述 #

上述代码在CodeSandbox中运行正常，但在本地浏览器中抛出错误：Error: Invalid value for <line> attribute x1="NaN"

解决方法 #

1. 移除RadarChart的width和height属性
   ResponsiveContainer已负责自适应尺寸，同时设置RadarChart的固定宽高会导致尺寸计算冲突，引发NaN错误。修改后代码：

<RadarChart
    cx={300}
    cy={250}
    outerRadius={150}
    data={data}
>

2. 确保ResponsiveContainer父容器有明确高度
   若父容器使用height: 100%，需保证所有上层容器（直至body）都设置了高度，否则ResponsiveContainer无法正确计算尺寸。可给父容器设置固定高度（如height: 500px），或通过CSS确保高度继承。

3. 处理异步数据加载
   如果data是异步获取的，初始渲染时可能为空或未定义，导致图表计算出错。可在渲染前判断数据是否存在：

{data?.length > 0 && (
  <ResponsiveContainer width={"95%"} height={"100%"}>
    {/* 雷达图组件 */}
  </ResponsiveContainer>
)}

内容的提问来源于stack exchange，提问作者Harsh Jhunjhunwala