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

Question

我正在使用 Recharts BarChart components to visualize my data. In the Bar component，它支持一些事件处理程序（onClick、onMouseDown 等）。

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

我的问题：如果条形图的值为 0，用户将无法单击 link，因为 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>

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

Recharts Event not working when bar chart bar value is 0

reactjs

recharts