Chart.js - 棒グラフの水平線がツールチップと干渉する

Question

私はChart.js 2.6を使用しています。横棒グラフに平均値を表示するためにhorizo​​ntalLineプラグインを実装しました。それはうまく動作しますが、ツールチップがラインと交差する場所にツールチップを表示すると、水平ライン自体によって部分的に覆われます。私はツールチップを水平線の上に描画させる方法を理解しようとしています。

私は、ツールチップがキャンバス要素の一部であると理解しているため、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 
    }] 
} 

を使用して棒グラフのオプションに追加します。

..howeverあなたがツールチップを表示するチャートのセグメント上に置くと、ツールチップが水平線の経路にあるとき、それは以下の見た問題の原因となります。

Answer 1

代わりafterDrawの、afterDatasetDrawフックにあなたのプラグインを取り付けます。これによりツールチップの前に水平線が描画されます。

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>