如何渲染懸停在圖表上的垂直線

Question

我試圖在圖表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; 
}; 

注意我看到其他的解決方案，這其中第二畫布層上使用圖表畫布之上 - 我不認爲這是一種選擇因爲我需要垂直線出現在圖表頂部，但在我將要實施的自定義工具提示下方。

任何建議表示讚賞，謝謝！

Answer 1

只需添加以下行你畫的線

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

順便說之前，你行不舒展一路底部。如果您想讓它一直延伸，請使用0和this.chart.height作爲您的yStart和yEnd。或者，您可以使用y軸比例來計算比例的最大和最小像素（請參閱https://jsfiddle.net/ombaww9t/）。

---

小提琴 - https://jsfiddle.net/56s9av1j/

Answer 2

工作版本2.6.0（改變 'Y軸0' 到你的ID y軸）

// 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; 
};