java柱状图添加水平线,Chart.js - 条形图上的水平线干扰工具提示

我正在使用Chart.js 2.6并且我已经实现了horizontalLine插件来显示条形图上的平均值 . 它工作正常，但是当工具提示显示在与线相交的点上时，它部分被水平线本身覆盖 . 我试图弄清楚如何使工具提示在水平线上绘制 .

我理解工具提示是canvas元素的一部分，因此没有z-index属性 . 我怎么能做到这一点？

这是我用于水平线插件的内容 .

var horizonalLinePlugin = {

afterDraw: function(chartInstance) {

var yScale = chartInstance.scales["y-axis-0"];

var canvas = chartInstance.chart;

var ctx = canvas.ctx;

var index, line, style, width;

if (chartInstance.options.horizontalLine) {

for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {

line = chartInstance.options.horizontalLine[index];

style = (line.style) ? line.style : "rgba(169,169,169, .6)";

yValue = (line.y) ? yScale.getPixelForValue(line.y) : 0 ;

ctx.lineWidth = (line.width) ? line.width : 3;

if (yValue) {

ctx.beginPath();

ctx.moveTo(chartInstance.chartArea.left, yValue);

ctx.lineTo(canvas.width, yValue);

ctx.strokeStyle = style;

ctx.stroke();

}

if (line.text) {

ctx.fillStyle = style;

ctx.fillText(line.text, 0, yValue + ctx.lineWidth);

}

}

return;

}

}

};

Chart.pluginService.register(horizonalLinePlugin);

...然后我使用以下内容将其添加到条形图选项中

options: {

...standard option stuff...

"horizontalLine": [{

"y": averageValue,

"style" : colorOfTheLine

}]

}

这会生成一个如下图所示的图表 .

..但是，当您将鼠标悬停在图表的某个部分上以显示工具提示时，并且工具提示位于水平线的路径中时，会导致出现下面的问题 .