‘’react vis‘如何在特定点上显示十字准线

import React from 'react';
import { XYPlot, XAxis, YAxis, LineSeries, Crosshair } from 'react-vis';

class MyChart extends React.Component {
  state = {
    crosshairValues: [] // 用于存储十字准线的值
  };

  // 处理鼠标移动事件，更新十字准线的值
  handleMouseHover = (value, { index }) => {
    this.setState({ crosshairValues: [data[index]] });
  };

  render() {
    const { crosshairValues } = this.state;

    return (
      <XYPlot width={500} height={300} onMouseLeave={() => this.setState({ crosshairValues: [] })}>
        <XAxis />
        <YAxis />
        <LineSeries data={data} onNearestX={this.handleMouseHover} />
        <Crosshair values={crosshairValues}>
          {/* 在十字准线上显示的内容 */}
          <div>
            <p>X: {crosshairValues[0]?.x}</p>
            <p>Y: {crosshairValues[0]?.y}</p>
          </div>
        </Crosshair>
      </XYPlot>
    );
  }
}