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

Question

我正在使用图表BarChart组件来可视化我的数据。在Bar component中，它支持一些事件处理程序（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>