Chart.js - Horizontale Linie auf Balkendiagramm interferiert mit Tooltip

Question

Ich benutze Chart.js 2.6 und ich habe das horizontalLine-Plugin implementiert, um einen Durchschnittswert auf meinen Balkendiagrammen anzuzeigen. Es funktioniert einwandfrei. Wenn der Tooltip jedoch an der Stelle angezeigt wird, an der er mit der Linie schneidet, wird er teilweise von der horizontalen Linie selbst abgedeckt. Ich versuche herauszufinden, wie der Tooltip über die horizontale Linie gezogen werden kann.

Ich verstehe, dass die QuickInfo Teil des Canvas-Elements ist und daher keine Z-Index-Eigenschaft hat. Wie kann ich das erreichen?

Hier ist, was ich für meine horizontale Linie Plugin verwende.

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); 

... und dann das folgende ich fügen Sie den Balkendiagramm Optionen

options: { 
    ...standard option stuff... 
    "horizontalLine": [{ 
      "y": averageValue, 
      "style" : colorOfTheLine 
    }] 
} 

Welche ein Diagramm erzeugt, die unten wie das aussieht.

..however, wenn Sie auf einem Segment des Diagramms schweben den Tooltip anzuzeigen, und der Tooltip ist in dem Weg der horizontalen Linie, verursacht es das Problem unten gesehen.

Answer 1

Bringen Sie Ihr Plugin zum afterDatasetDraw Haken, statt afterDraw. Dadurch wird die horizontale Linie vor dem Tooltip gezeichnet.

var horizonalLinePlugin = { 
 
    afterDatasetDraw: 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); 
 

 
new Chart(canvas, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: ["January", "February"], 
 
     datasets: [{ 
 
     label: "Dataset 1", 
 
     data: [80, 50] 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
     }, 
 
     horizontalLine: [{ 
 
     y: 50, 
 
     style: 'red' 
 
     }] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>