Javascript 悬停时如何在chart.js中的特定点添加水平线？

我希望能够添加多个点作为参考位置，在这里我可以显示水平线

以下是我试图实现的目标：

我还希望这样，当你不悬停在一个点上时，它的不透明度会降低，当你悬停在它上面时，不透明度是正常的。我也不知道如何添加正方形，当鼠标悬停并添加“哇”文本时，如何使正方形变大。非常感谢您的帮助。

您可以使用在特定值处绘制水平线，然后您可以实现适当的

onHover

回调（整个图表上的事件）来显示/隐藏这些线

annotation : {
    drawTime : "afterDraw",
    annotations : [{
            id : "line1",
            type : "line",
            mode : "horizontal",
            scaleID : "y-axis",
            value : 4.5,
            borderWidth : 2,
            borderColor : "red",
            label : {
                content : "threshold 1",
                enabled : true,
                position : "right"
            }
        }
    ]
},

请参见我的小提琴，以举例说明该方法：

var数据集=[{x:1，y:12}，{x:2，y:3}，{x:3，y:2}，{x:4，y:1}，{x:5，y:8}，{x:6，y:8}，{x:7，y:2}，{x:8，y:2}，{x:9，y:3}，{x:10，y:5}，{x:11，y:11}，{x:12，y:1}；
var标签=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
变量行=[]，id=0；
var-linesOn=false；
风险值数据={
标签：标签，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边界宽度：2，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：数据集，
}]
};
var选项={
传说：错，
标题：{
显示：对，
},
onHover：函数（evt）{
log（“onHover”，evt.type）；
if（evt.type='mousemove'&&linesOn==false）{
linesOn=true；
myLineChart.options.annotation.annotations=线条；
myLineChart.update（）；
}else if（evt.type=='mouseout'&&linesOn==true）{
linesOn=false；
myLineChart.options.annotation.annotations=[]；
myLineChart.update（）；
}
var item=myLineChart.getElementAtEvent（evt）；
如果（项目长度）{
console.log（“>item”，item）；
console.log（“>data”，项[0]。_索引，数据.dataset[0]。数据[item[0]。_索引]）；
}
},
onClick：函数（evt）{
var el=myLineChart.getElementAtEvent（evt）；
日志（“onClick”，el，evt）；
},
注释：{
抽签时间：“后抽签”，
注释：行
},
比例：{
xAxes：[{
id:'x轴'，
类型：'线性'，
位置：'底部'，
滴答声：{
最高：12，
民:1,，
步长：1，
回调：函数（值、索引、值）{
返回数据。标签[索引]；
}
}
}],
雅克斯：[{
id:'y轴'，
类型：'线性'，
}],
}
};
var myLineChart=Chart.Line（'myChart'{
数据：数据，
选项：选项
});
//定义两行（这些代码必须在图表创建之后）
addLine（3.5）；
addLine（7）；
函数addLine（值）{
id++；
变量ln={
id:“行”+id，
键入：“行”，
模式：“水平”，
scaleID：“y轴”，
价值：价值，
边界宽度：2，
边框颜色：“红色”，
标签：{
内容：“阈值”+id，
启用：对，
位置：“右”
}
};
线。推（ln）；
}

更新后的答案正是我所需要的，非常感谢。现在我可以用这个：）我想在水平线上添加

shadowBlur:10

和

shadowColor:“黑色”

，你知道怎么做吗？不，那些CSS属性不受chartjs插件注释的支持，看看实现这个功能的最佳方法是什么@beaver您可以分叉github项目并修改

line

类的

draw（）

函数：请参阅