在鼠标指针悬停的react-vis图表中添加垂直线

npm install react-vis

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

const Chart = () => {
  const [crosshairValues, setCrosshairValues] = useState([]);

  const data = [
    { x: 1, y: 10 },
    { x: 2, y: 5 },
    { x: 3, y: 15 },
    { x: 4, y: 20 },
    { x: 5, y: 8 },
  ];

  const handleMouseLeave = () => {
    setCrosshairValues([]);
  };

  const handleNearestX = (value, { index }) => {
    setCrosshairValues([data[index]]);
  };

  return (
    <XYPlot width={300} height={200} onMouseLeave={handleMouseLeave}>
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis />
      <YAxis />
      <LineSeries data={data} onNearestX={handleNearestX} />
      <Crosshair values={crosshairValues}>
        <div>{crosshairValues[0]?.y}</div>
      </Crosshair>
    </XYPlot>
  );
};

export default Chart;

import React from 'react';
import Chart from './Chart';

const App = () => {
  return (
    <div>
      <h1>React-vis Chart with Vertical Line</h1>
      <Chart />
    </div>
  );
};

export default App;