React Native中Victory Native折线图Hover时添加垂直线与Tooltip

问题描述 #

我想在React Native的Victory Native折线图上实现鼠标悬浮时显示垂直线及对应数据的Tooltip，预期效果是悬浮时出现垂直线，同时在对应数据点位置显示包含x、y值的提示框。但目前仅能实现垂直线，无法添加数据Tooltip，当前代码如下：

import React, {useState} from 'react';
import { View, StyleSheet } from 'react-native';
import {
  VictoryChart,
  VictoryCursorContainer,
  VictoryLine,
} from 'victory-native';


const TestComp = () => {
  const [hoverData, setHoverData] = useState(null);

  const handleCursorChange = (points, props) => {
    console.log(props.cursorValue);
    if (points && points.length > 0) {
      const {x} = points[0];
      setHoverData(x);
    } else {
      setHoverData(null);
    }
  };
  return (
    <View style={styles.container}>
      <VictoryChart
        domain={{x: [0, 10], y: [0, 10]}}
        containerComponent={
          <VictoryCursorContainer
            cursorDimension="x"
            cursorLabel={hoverData ? hoverData : ''}
            onCursorChange={handleCursorChange}
          />
        }>
        <VictoryLine
          data={[
            {x: 1, y: 2},
            {x: 2, y: 3},
            {x: 3, y: 5},
            {x: 4, y: 4},
            {x: 5, y: 7},
            {x: 6, y: 6},
            {x: 7, y: 8},
            {x: 8, y: 7},
            {x: 9, y: 9},
            {x: 10, y: 8},
          ]}
        />
      </VictoryChart>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default TestComp;

解决方案 #

要实现预期效果，需要修改数据捕获逻辑并添加Tooltip组件，具体操作如下：

1. 调整数据捕获逻辑，保存完整数据点 #

原代码仅保存了x值，需改为保存当前悬浮位置对应的完整数据对象，才能获取y值用于Tooltip显示：

const handleCursorChange = (points, props) => {
  if (points && points.length > 0) {
    // 获取悬浮位置匹配的完整数据点
    const matchedData = points[0].data;
    setHoverData(matchedData);
  } else {
    setHoverData(null);
  }
};

2. 添加VictoryTooltip显示数据提示 #

在VictoryLine中配置labelComponent，通过active属性控制Tooltip的显示状态，自定义提示内容与样式：

<VictoryLine
  data={[
    {x: 1, y: 2},
    {x: 2, y: 3},
    {x: 3, y: 5},
    {x: 4, y: 4},
    {x: 5, y: 7},
    {x: 6, y: 6},
    {x: 7, y: 8},
    {x: 8, y: 7},
    {x: 9, y: 9},
    {x: 10, y: 8},
  ]}
  labelComponent={
    <VictoryTooltip
      active={!!hoverData}
      x={hoverData?.x}
      y={hoverData?.y}
      label={`x: ${hoverData?.x}\ny: ${hoverData?.y}`}
      style={{
        fill: '#fff',
        stroke: '#333',
        strokeWidth: 1,
        fontSize: 12,
        padding: 8
      }}
    />
  }
/>

3. 优化光标容器配置 #

移除原有的cursorLabel（改用数据Tooltip），可自定义垂直线样式：

<VictoryCursorContainer
  cursorDimension="x"
  onCursorChange={handleCursorChange}
  cursorStyle={{
    stroke: '#999',
    strokeWidth: 1,
    strokeDasharray: '4,4'
  }}
/>

完整修改后的代码 #

import React, {useState} from 'react';
import { View, StyleSheet } from 'react-native';
import {
  VictoryChart,
  VictoryCursorContainer,
  VictoryLine,
  VictoryTooltip,
} from 'victory-native';


const TestComp = () => {
  const [hoverData, setHoverData] = useState(null);

  const handleCursorChange = (points, props) => {
    if (points && points.length > 0) {
      const matchedData = points[0].data;
      setHoverData(matchedData);
    } else {
      setHoverData(null);
    }
  };

  return (
    <View style={styles.container}>
      <VictoryChart
        domain={{x: [0, 10], y: [0, 10]}}
        containerComponent={
          <VictoryCursorContainer
            cursorDimension="x"
            onCursorChange={handleCursorChange}
            cursorStyle={{
              stroke: '#999',
              strokeWidth: 1,
              strokeDasharray: '4,4'
            }}
          />
        }>
        <VictoryLine
          data={[
            {x: 1, y: 2},
            {x: 2, y: 3},
            {x: 3, y: 5},
            {x: 4, y: 4},
            {x: 5, y: 7},
            {x: 6, y: 6},
            {x: 7, y: 8},
            {x: 8, y: 7},
            {x: 9, y: 9},
            {x: 10, y: 8},
          ]}
          labelComponent={
            <VictoryTooltip
              active={!!hoverData}
              x={hoverData?.x}
              y={hoverData?.y}
              label={`x: ${hoverData?.x}\ny: ${hoverData?.y}`}
              style={{
                fill: '#ffffff',
                stroke: '#333333',
                strokeWidth: 1,
                fontSize: 12,
                padding: 8
              }}
            />
          }
        />
      </VictoryChart>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default TestComp;

关键说明 #

• handleCursorChange中的points参数包含悬浮位置匹配到的数据点信息，通过points[0].data可获取完整的x、y数据。
• VictoryTooltip的active属性控制显示状态，结合hoverData实现悬浮显示、移出隐藏的效果。
• 若需更个性化的Tooltip，可替换VictoryTooltip为自定义React Native组件，通过hoverData控制位置与内容。

内容的提问来源于stack exchange，提问作者Abdul Rehman