0

我正在尝试实现一个允许在条形图上选择条形的条形图。我遇到的麻烦是正确设置事件。我有以下代码:

<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 中实现滑动?任何方向将不胜感激!

4

0 回答 0