重新绘制 PolarGrid 多边形未显示答案

【问题标题】：Recharts PolarGrid polygons not showing重新绘制 PolarGrid 多边形未显示
【发布时间】：2021-10-08 09:12:56
【问题描述】：

我正在尝试使用 Rechart 构建 RadarChart。

我需要图表显示 5 条半径多边形线且没有角度线。它适用于圆圈，如果我将 <PolarGrid/> 的属性 gridType 从 'polygon' 更改为 'circle'，我确实有 5 个同心圆。但是由于某种原因'polygon' 如果我设置polarAngles={[]} 来删除角度线，多边形也会消失，尽管 polarRadius={[ 10, 20, 40, 60, 80 ]} 知道我做错了什么吗？

        <ResponsiveContainer width='100%' height='100%'>
          <RadarChart
            data={this.state.data.data}
            innerRadius='0%'
            outerRadius='70%'
            startAngle={-150}
            endAngle={210}
          >
            <PolarGrid 
              gridType='polygon'
              polarAngles={[]}
              polarRadius={[ 10, 20, 40, 60, 80 ]}
              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>

【问题讨论】：

标签： reactjs polygon recharts radar-chart

【解决方案1】：

polarAngles 数组需要知道应该在哪些点绘制多边形的角，它不应该为空如果您需要删除径向线，那么为此您需要将radialLines 属性设置为false

<PolarGrid
  gridType="polygon"
  polarRadius={[10, 20, 40, 60, 80]}
  stroke="#fff"
  radialLines={false}
/>

【讨论】：