reactjs 如何在Recharts图中自定义x轴刻度

esyap4oy 于 2023-02-15 发布在 React

关注(0)|答案(2)|浏览(180)

我想在条形图的x轴刻度中放置多条线，类似于以下内容：

但是，我必须控制每组条形图下面的渲染内容的所有 prop 都是dataKey，所以我可以使用Recharts得到的是：

这只是从我的数据中呈现一个值。
理想情况下，我希望能够传递给XAxis一个prop来渲染它，例如：

<XAxis dataKey="name" render={(value, dataPoint) => (
  <CustomXAxisName>
    <p>{value}</p>
    <p>{dataPoint.total} Principals</p>
  </CustomXAxisName>
)} />

但是我找不到这方面的启示。有一个更灵活的 prop 来配置label，但那是指整个轴的一个标签。
有没有办法得到这个？我很惊讶，我找不到一个自然的方法来做到这一点，因为Rechart，因为在其他方面如此灵活，我不认为这是一个奇怪的想法。

reactjs

来源：https://stackoverflow.com/questions/75454383/how-to-do-custom-x-axis-ticks-in-a-recharts-graph

2条答案

按热度按时间

bxjv4tth1#

你看过https://recharts.org/en-US/examples/CustomizedLabelLineChart吗？它展示了如何在x轴上对角放置一些东西，当然它可以用来放置多条线。
它使用tick={<CustomTick/>}组件的tick={<CustomTick/>}属性。

赞(0）回复(0）举报 2023-02-15

c3frrgcw2#

你可以这样做：

const customizedGroupTick = (props: any) => {
    const { index, x, y, payload } = props;
  

    return (
      <g>
        <g>
          <text x={x} y={y}>
           data
          </text>
          <text x={x} y={y }>
          data
          </text>
        </g>
      </g>
    );
  };

然后

<XAxis
          dataKey="Date"
          axisLine={false}
          tickLine={false}
          scale="band"
          tick={customizedGroupTick}
          interval={0}
        />

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 如何在Recharts图中自定义x轴刻度

2条答案

相关问题

热门标签

最新问答