reactjs - 当条形图条值为 0 时，Recharts 事件不起作用

Question

我正在使用 Recharts BarChart组件来可视化我的数据。在Bar 组件中，它支持一些事件处理程序（onClick、onMouseDown 等）。

我的问题：我有一个 onClick 事件处理程序，因此用户可以单击条形图并根据结果 ID 重定向到其他页面。

我的问题：如果条形图的值为 0，则用户无法单击链接，因为 onClick 事件处理程序是在条形本身上实现的。

源代码：

<BarChart
  width={500}
  height={500}
  layout="vertical"
  data={data}
>
  <XAxis type="number" />
  <YAxis dataKey="title" type="category" />
  <Bar
    dataKey="score"
    fill={Color}
    label={<CustomLabel />}
    onClick={(data, index) => {
      // some logic here
      return history.push(`/${data.x.y.id}`);
    }}
  />
</BarChart>

截图：

我的尝试：

我试图查看一个可能的解决方案并在 recharts 网站上观察 API 上的示例，我没有看到任何能够解决我的问题的东西。我还尝试在轴或栏上的标题上单击 onClick，但该组件不支持该功能。请指教。

Answer 1

您可以在BarChart组件上添加一个 onClick 属性，并检查data.activePayload[0]单击了哪个条形图。

<BarChart
  width={500}
  height={500}
  layout="vertical"
  data={data}
  onClick={(data) => {
    // do your history.push based on data.activePayload[0]
    if (data && data.activePayload && data.activePayload.length > 0) {
      return history.push(`/${data.activePayload[0].x.y.id}`);
    }
  }}
>
  <XAxis type="number" />
  <YAxis dataKey="title" type="category" />
  <Bar
    dataKey="score"
    fill={Color}
    label={<CustomLabel />}
  />
</BarChart>