Victory.js 从悬停线点获取 x,y 数据答案

【问题标题】：Victory.js get x,y data from hovered line pointVictory.js 从悬停线点获取 x,y 数据
【发布时间】：2022-12-23 16:30:44
【问题描述】：

如何在胜利线组件中获取悬停点的 x,y 数据？

我试过这个：

            <VictoryLine
              data={data}
              style={{ data: { stroke: Colors.green } }}
              events={[
                {
                  target: 'parent',
                  eventHandlers: {
                    onMouseOver: () => {
                      return [
                        {
                          target: 'data',
                          mutation: (props) => {
                            // props.data returns the values of all data points
                          },
                        },
                      ]
                    }
                  },
                },
              ]}
            />

有没有办法在 victory.js 中做到这一点？

【问题讨论】：

标签： victory-charts victory-native

【解决方案1】：

分离胜利图表的不同组成部分

No	Component	Purpose
1	VictoryChart	It is a wrapper components, it is good to use to share events
2	VictoryVoronoiContainer	It is useful for hover interactions like tooltip
3	VictoryTooltip	It is used for tooltip
4	VictoryAxis	It is used for the axis, tickLabels
5	VictoryLine	It is used for single line path

虚拟数据

const data = [
  {
    each: "2022-12-19",
    total: 1
  },
  {
    each: "2022-12-20",
    total: 15
  },
  {
    each: "2022-12-21",
    total: 8
  },
  {
    each: "2022-12-22",
    total: 21
  },
  {
    each: "2022-12-23",
    total: 3
  }
];

代码

<VictoryChart
  domainPadding={20}
  height={300}
  containerComponent={
    <VictoryVoronoiContainer
      voronoiDimension="x"
      labels={({ datum }) =>
        `x: ${datum.each}, y: ${datum.total}`
      }
      labelComponent={
        <VictoryTooltip
          cornerRadius={0}
          flyoutStyle={{
            fill: "white",
            stroke: "blue"
          }}
        />
      }
    />
  }
>
  <VictoryLine
    width={10}
    data={data}
    style={{
      labels: {
        fill: "blue"
      },
      data: {
        stroke: "blue",
        strokeWidth: 4
      }
    }}
    labels={({ datum }) => datum.y}
    x={"each"}
    y={"total"}
    height={250}
  />
  <VictoryAxis
    tickFormat={(x) => x}
    style={{
      tickLabels: { fill: "transparent" },
      axis: { stroke: "transparent" },
      ticks: { stroke: "transparent" }
    }}
  />
  <VictoryAxis
    dependentAxis
    style={{
      tickLabels: { fill: "transparent" },
      axis: { stroke: "transparent" },
      ticks: { stroke: "transparent" }
    }}
  />
</VictoryChart>

解释

要获取点上的 x,y 数据，您需要工具提示
使用VictoryChart并添加VictoryVoronoiContainer

VictoryVoronoiContainer

No	Props	What it does
1	label	To show the label data from your data point
2	labelComponent	Use `VictoryTooltip` to gain more control

VictoryTooltip

No	Props	What it does
1	flyoutStyle	Use stroke to change border color, fill -> background color

VictoryAxis 这仅用于更改轴和刻度线的颜色。

希望这是清楚的。此方法非常适用于工具提示情况

events 可用于显示工具提示。然而，这只适用于胜利条和其他一些，而不适用于胜利线。

【讨论】：