Javascript Chart.js-条形图上的水平线干扰工具提示

我使用的是Chart.js2.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);

这将生成一个类似下面的图表

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

---

将插件连接到

afterDatasetDraw

挂钩，而不是

afterDraw

。这将使水平线在工具提示之前绘制

var horizonalineplugin={
afterDatasetDraw:函数（chartInstance）{
var yScale=chartInstance.scales[“y轴-0”]；
var canvas=chartInstance.chart；
var ctx=canvas.ctx；
var指数、线条、样式、宽度；
if（chartInstance.options.horizontalLine）{
对于（索引=0；索引
将插件连接到
afterDatasetDraw挂钩，而不是
afterDraw。这将使水平线在工具提示之前绘制


var horizonalineplugin={
afterDatasetDraw:函数（chartInstance）{
var yScale=chartInstance.scales[“y轴-0”]；
var canvas=chartInstance.chart；
var ctx=canvas.ctx；
var指数、线条、样式、宽度；
if（chartInstance.options.horizontalLine）{
对于（索引=0；索引

如果您可以从chart.js文件中干扰画布，则可以使用此解决方案。决定只使用DOM工具提示，解决了整个问题。谢谢你！如果您可以从chart.js文件中干扰画布，可能会使用此解决方案。决定只使用DOM工具提示，解决了整个问题。谢谢你！好的，Github甚至建议订购是关键。我个人不喜欢Chart.js文档，谢谢你帮我节省时间好的，Github甚至建议订购是关键。我个人不喜欢Chart.js文档，谢谢你帮我节省时间
options: {
     ...standard option stuff...
     "horizontalLine": [{
          "y": averageValue,
          "style" : colorOfTheLine
     }]
}