Recharts雷达图PolarGrid设为polygon类型时多边形不显示问题求解

问题原因 #

你当前的配置错误点在于，使用清空polarAngles的方式来隐藏角度线。gridType='polygon'时，多边形网格的顶点位置必须依赖polarAngles传入的角度值计算，你将该属性设为空数组后，组件无法确定多边形的边数和顶点坐标，自然无法渲染出网格线。

解决方案 #

隐藏角度线不需要修改polarAngles，直接给<PolarGrid>组件新增radialLines={false}配置即可，这个属性专门用于控制是否显示从圆心向外发散的径向角度线，设为false后只会保留环形的多边形网格。

调整后的代码如下：

<ResponsiveContainer width='100%' height='100%'>
  <RadarChart
    data={this.state.data.data}
    innerRadius='0%'
    outerRadius='70%'
    startAngle={-150}
    endAngle={210}
  >
    <PolarGrid 
      gridType='polygon'
      polarRadius={[ 10, 20, 40, 60, 80 ]}
      radialLines={false} // 新增该配置隐藏角度线
      stroke='#fff'
    />
    <PolarAngleAxis
      dataKey='kind'
      type='category'
      tickLine={false}
      tickFormatter={this.tickFormatter.bind(this)}
      stroke='#fff'
      axisLine={false}
    />
    <Radar dataKey="value" fill="#ff0101" fillOpacity={0.7} />
  </RadarChart>
</ResponsiveContainer>

修改后即可实现5条多边形网格线、无角度线的效果，你原本配置的polarRadius参数无需改动。

内容的提问来源于stack exchange，提问作者Christophe Ribault