reactjs - Recharts 雷达图上的自定义标签

Question

我正在尝试在重新图表雷达图表上获取自定义标签工作。我已经尝试根据文档做多件事，所以我想我会把它扔给狼群。希望你们中的一个能指出我正确的方向。

              <ResponsiveContainer>
                <RadarChart outerRadius={125} cy={175} data={ucRadarData}>
                  <Legend verticalAlign='top' height={36} />
                  <PolarGrid />
                  <PolarAngleAxis dataKey='value'>
                    <Label content={({ value }) => <Typography>{value}</Typography>} /> // When I remove this component, the labels get removed as well so I assume this is the component I want to target.
                  </PolarAngleAxis>
                  <PolarRadiusAxis domain={[lowestRangeStart, highestRangeEnd]} tickCount={tickArray.length} />
                  <Radar label={({ label }) => <Typography>{label}</Typography>} name='Self Assessment' dataKey='Self' stroke='#8884d8' fill='#8884d8' fillOpacity={0.6} /> // Also tried adding custom label here.
                </RadarChart>
              </ResponsiveContainer>

Answer 1

做这个:
为自定义刻度创建渲染函数并将其作为刻度属性添加到 PolarAngleAxis 组件

function customTick({ payload, x, y, textAnchor, stroke, radius }) {
    return (
      <g
        className="recharts-layer recharts-polar-angle-axis-tick"
      >
        <text
          radius={radius}
          stroke={stroke}
          x={x}
          y={y}
          className="recharts-text recharts-polar-angle-axis-tick-value"
          text-anchor={textAnchor}
        >
          <tspan x={x} dy="0em">
            {payload.value}
          </tspan>
        </text>
      </g>
    );
  }

<PolarAngleAxis dataKey='value' tick={customTick}/>