,可以通过以下步骤实现:
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;
这样,当鼠标指针悬停在图表上时,会显示垂直线,并在垂直线上显示对应数据点的值。你可以根据需要自定义样式和数据。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云