Angular | ChartJs注释插件-将线条的位置链接到鼠标

Question

我试图用注释插件创建一个十字线，我设法修改了我的行的值，但它不会在图表上更新。

以下是我的图表选项概述：

public financialChartOptions: ChartConfiguration['options'] = {
plugins: {
annotation: {
annotations: {
line1: {
id: 'line1',
type: 'line',
borderColor: 'black',
borderWidth: 3,
scaleID: 'y',
value: 30
}
}
},
},
onHover: (e: any) => {
e.native.target.style.cursor = 'crosshair';
this.crosshair(e)
},
onLeave: function (e: any) {
e.native.target.style.cursor = 'default';
}
}

这是我的十字线功能：

crosshair(e: any) {
//@ts-ignore
this.chart!.options!.plugins!.annotation!.annotations!["line1"].value = e.chart.scales.y.getValueForPixel(e.y)
//@ts-ignore
console.log(this.chart!.options!.plugins!.annotation!.annotations!["line1"].value)
this.chart?.update()
}

console.log会返回所需的值，但图表上没有任何变化。

请告诉我是否有更好的方法来创建垂直和水平十字线。

Answer 1

Chart.js有一个名为chartjs-plugin-crosshair的插件，也许它能满足您的需求，请查看！

参考堆叠式