在 X 轴上显示一个带有 recharts 的按钮

【问题标题】：Display a button in X axis with recharts在 X 轴上显示一个带有 recharts 的按钮
【发布时间】：2022-02-03 00:48:44
【问题描述】：

我必须使用图表创建条形图。在 X 轴上，我需要显示标签和链接到每个特定栏的按钮，以便执行操作。

我找到了it is possible to use more than a single X axis，但我似乎没有找到如何将 dataKey 替换为组件而不是字符串。有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

我在recharts API https://recharts.org/en-US/examples/CustomizedLabelLineChart找到了信息

只要返回一个元素，就可以创建一个 react 组件，并且由于可以添加一个 onClick 函数，它可以充当一个按钮。示例如下：

class CustomizedAxisTick extends PureComponent {
  render() {
    const { x, y, stroke, payload } = this.props;

    return (
      <g transform={`translate(${x},${y})`} onClick={()=> console.log(payload.value)}>
        <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">
          {payload.value}
        </text>
      </g>
    );
  }
}

那么你只需要像这样调用 XAxis 中的组件：

<XAxis tick={<CustomizedTick />} />

【讨论】：