当条形图条值为 0 时,Recharts 事件不起作用
Recharts Event not working when bar chart bar value is 0
我正在使用 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,但该组件不支持该功能。请指教
您可以在 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>
我正在使用 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,但该组件不支持该功能。请指教
您可以在 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>