工具提示中未定义的胜利堆积区域

Question

我正在使用胜利堆叠面积图，并试图在工具提示上显示标签。但每当我点击图表时，它并没有给出索引。我试着控制台它，它给索引值undefined，但它在堆叠条形图中运行良好，我使用了相同的代码。它适用于堆叠条形图，但不适用于堆叠面积图。下面是我的代码

const clickEvent = [
{
target: 'data',
mutation: (props: {
data: {
[x: string]: {
x: React.SetStateAction<string>;
y: React.SetStateAction<number>;
};
};
index: number;
}) => {
({
style: {fill: colors.primeColor, width: 14.5},
});
console.log(props);
setDay(props?.data[props.index]?.x);
setWasteItem(props?.data[props.index]?.y);
},
},
{
target: 'labels',
mutation: () => ({active: false}),
},
];
return (
<VictoryChart
theme={VictoryTheme.material}
height={300}
containerComponent={<VictoryVoronoiContainer />}
width={380}>
<VictoryStack height={200}>
<VictoryArea
style={{
data: {
fill: colors.orangeOpacity02,
stroke: colors.orange,
strokeWidth: 2,
},
}}
data={wastedData}
labelComponent={
<VictoryTooltip
renderInPortal={false}
style={{fill: colors.orange}}
/>
}
labels={() => `${day}: ${wasteItem} Wasted`}
events={[
{
target: 'data',
eventHandlers: {
onPressIn: () => {
return clickEvent;
},
},
},
]}
/>
<VictoryArea
style={{
data: {
fill: colors.primeColorOpacity05,
stroke: colors.primeColor,
strokeWidth: 2,
},
}}
data={usedData}
labelComponent={
<VictoryTooltip
renderInPortal={false}
style={{fill: colors.primeColor}}
/>
}
labels={() => `${day}: ${wasteItem} Used`}
events={[
{
target: 'data',
eventHandlers: {
onPressIn: () => {
return clickEvent;
},
},
},
]}
/>
</VictoryStack>
<VictoryAxis
fixLabelOverlap={true}
tickValues={['Aug 1', 'Aug 15', 'Aug 30']}
style={{
axis: {stroke: 'transparent'},
grid: {stroke: 'transparent'},
tickLabels: {
fontSize: 12,
paddingLeft: 10,
},
}}
/>
<VictoryAxis
dependentAxis
tickValues={[0, 10, 20, 30]}
orientation="left"
style={{
tickLabels: {fontSize: 12},
axis: {stroke: 'transparent'},
}}
/>
</VictoryChart>
);
};

有人能告诉我那个代码出了什么问题吗？

Answer 1

事件的道具中没有名为data的键。

eventHandlers应作为其键为标准的对象给定事件名称(例如onClick(及其值是事件回调。回调是用单个元素的props调用的触发了事件。例如当在条上发生点击事件时，提供给onClick处理程序的props对象将包括props特定于该单个条，例如datum、index、style等。事件处理程序回调的返回值可能用于变异其他元素。

您可以使用datum