Recharts——有没有办法在 RadarChart 的图表和标签之间添加填充？

Question

我正在查看他们网站上的简单 RadarChart example，我想在标签和图表本身之间添加一些填充，但似乎没有一种简单的方法可以做到这一点。

这可以以某种方式完成吗？或者有人可以建议我可以使用的另一个图表库吗？

Answer 1

你可以用 CSS

那些有 .recharts-polar-angle-axis-tick-value class，所以只需在上面添加 css

.recharts-polar-angle-axis-tick-value {
    transform: translateX(-3rem);
}

Answer 2

一种方法是使用自定义刻度并操纵 x 和 y 值

function renderPolarAngleAxis({ payload, x, y, cx, cy, ...rest }) {
  return (
    <Text
      {...rest}
      verticalAnchor="middle"
      y={y + (y - cy) / 2}
      x={x + (x - cx) / 2}
    >
      {payload.value}
    </Text>
  );
}

return (
  <RadarChart data={data}>
   ...
   <PolarAngleAxis tick={props => renderPolarAngleAxis(props)} />
   ...
  </RadarChart>
)

这是结果

Recharts——有没有办法在 RadarChart 的图表和标签之间添加填充？

Recharts — Is there a way to add a padding between the chart and labels for RadarChart?

javascript

charts

reactjs

recharts