我正在尝试实现一个允许在条形图上选择条形的条形图。我遇到的麻烦是正确设置事件。我有以下代码:
<VictoryChart
containerComponent={
<Svg>
<VictoryVoronoiContainer voronoiDimension="x" />
</Svg>
}
>
<VictoryAxis fixLabelOverlap name="dateAxis" />
<VictoryAxis dependentAxis name="dailySpendAxis" />
<VictoryBar
data={dataWithCreditBarsRemoved}
events={[
{
target: 'data',
eventHandlers: {
onPressIn: (event, data) => {
return [
{
target: 'data',
eventKey: 'all',
mutation: props => {
const fill = props.style?.fill;
return fill === 'green'
? null
: { style: { fill: 'green' } };
},
},
{
target: 'data',
mutation: () => {
console.log(data.datum);
setSelectedBar(data?.datum);
return {
style: { fill: 'red' },
};
},
},
];
},
},
},
]}
name="dailySpendBars"
/>
</VictoryChart>
这样做会使得很难按数据很少的条形图。
我想以一种方式实现它,当按下图表时,它会选择最近的条形图,并且在任一方向上滑动手指都会选择最近的条形图。我能找到的最好的例子是在耐克跑步应用程序中。它放置在一条带有工具提示的行中,该工具提示包含在手指滑动时会发生变化的数据。
如何在 Victory Native 中实现滑动?任何方向将不胜感激!