Javascript Angular应用程序中的Chartjs插件标签在悬停时意外移动

我有一个角度应用程序，显示使用和指令的条形图

我还在条形图上应用了一个Chartjs插件，在上面添加了一条带标签的水平线

其显示方式如下，标签和水平线之间有一个空格：

但当我将鼠标悬停在图表中的一个条形图上后，标签会向直线移动几个像素：

我不知道为什么。以下是转载的问题：

以及守则：

//角度应用程序----------------------------------------------------------
angular.module（'app'，['chart.js']））
.controller（'BarCtrl'，['$scope'，
职能（$范围）{
$scope.labels=['2006'，'2007'，'2008'，'2009'，'2010'，'2011'，'2012']；
$scope.series=['series A']；
$scope.data=[
[65, 59, 80, 81, 56, 55, 40]
];
$scope.options={
水平线：[{
“y”：60，
“风格”：“rgba（255102102,0.4）”，
“文本”：“水平线”
}]
}
}]);
//chart.js的水平线扩展------------------------------
var HorizonalInPlugin={
afterDraw:函数（chartInstance）{
var yScale=chartInstance.scales[“y轴-0”]；
var canvas=chartInstance.chart；
var ctx=canvas.ctx；
var指数；
var线；
var风格；
var标签化；
if（chartInstance.options.horizontalLine）{
对于（索引=0；索引

---

任何感兴趣的人-

出现这种情况的原因是，当将ChartJS悬停在图形上时，默认情况下，ChartJS设置为顶部

要获得正确的行为，您需要在绘制文本之前将文本的基线设置为字母，例如：

...
ctx.textBaseline = 'alphabetic';
ctx.fillText(text, x, y);
...

---

这是答案。

我花了很长一段时间试图解决这个问题，结果是空的。也许可以试试这个插件：