我从recharts
移到react-chartjs-2
库的主要原因是recharts
的响应支持较差,但是现在我无法将鼠标悬停在图表上并在显示以下内容的每个索引上显示垂直线每个数据集的值。
我尝试使用关于该主题的少量文档,但运气不好,集成了chartjs-plugin-annotation
和chartjs-plugin-crosshair
。有人可以告诉我该怎么做吗?
我当前的代码如下:
const datasets = keys.map(lineKey => ({
fill: false,
label: keyToNameMap[lineKey],
data: data.map(datum => ({ t: datum.date, y: datum.lines[lineKey] })),
borderColor: keyToStrokeMap[lineKey],
pointHitRadius: 10,
lineTension: 0,
borderJoinStyle: 'round',
}))
return (
<Line
height={height}
width={width}
data={{
labels: data.map(x => x.date),
datasets,
}}
options={{
maintainAspectRatio: false,
spanGaps: false,
scales: {
xAxes: [
{
type: 'time',
distribution: 'linear',
},
],
},
}}
/>
)
谢谢