chartjsのホバーに垂直線をレンダリングする方法

Question

chartjs v2のプロット領域にカーソルを置いたときに縦線を描画しようとしています。私は基本的な作業バージョンを持っていますが、ラインが描かれるたびにラインを取り除く方法は分かりませんでした。私はそれがためのオプションだとは思わない - ここ

は実施例である - 私は二帆布層がチャートキャンバスの上で使用する場合、これに他のソリューションを見てきましたhttps://jsfiddle.net/s9gyynxp/5/

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3] 
     }] 
    } 
}); 

// Hook into main event handler 
var parentEventHandler = Chart.Controller.prototype.eventHandler; 
Chart.Controller.prototype.eventHandler = function() { 
    var ret = parentEventHandler.apply(this, arguments); 

    // Draw the vertical line here 
    var eventPosition = Chart.helpers.getRelativePosition(arguments[0], this.chart); 
    this.chart.ctx.beginPath(); 
    this.chart.ctx.moveTo(eventPosition.x, 30); 
    this.chart.ctx.strokeStyle = "#ff0000"; 
    this.chart.ctx.lineTo(eventPosition.x, 340); 
    this.chart.ctx.stroke(); 

    return ret; 
}; 

注意私はチャートの上に縦線を表示する必要がありますが、私は実装するカスタムツールチップの下にあります。

ご意見ありがとうございます。あなたのラインがところで

... 
this.clear(); 
this.draw(); 
... 

を描く前に

Answer 1

ただ、次の行を追加し、あなたのラインが下にすべての方法を伸ばしていません。すべての方法で伸ばしたい場合は、yStartとyEndに0とthis.chart.heightを使用してください。または、y軸スケールを使用して、スケールの最大ピクセルと最小ピクセルを計算できます（https://jsfiddle.net/ombaww9t/参照）。

---

フィドル - 2.6.0用https://jsfiddle.net/56s9av1j/

Answer 2

作業バージョン（あなたのID、y軸への変更 'y軸-0'）

// Hook into main event handler 
let parentEventHandler = Chart.Controller.prototype.eventHandler; 
Chart.Controller.prototype.eventHandler = function() { 
    let ret = parentEventHandler.apply(this, arguments); 

    let x = arguments[0].x; 
    let y = arguments[0].y; 
    this.clear(); 
    this.draw(); 
    let yScale = this.scales['y-axis-0']; 
    this.chart.ctx.beginPath(); 
    this.chart.ctx.moveTo(x, yScale.getPixelForValue(yScale.max)); 
    this.chart.ctx.strokeStyle = "#ff0000"; 
    this.chart.ctx.lineTo(x, yScale.getPixelForValue(yScale.min)); 
    this.chart.ctx.stroke(); 

    return ret; 
};