Come eseguire il rendering di una linea verticale al passaggio del mouse nei grafici

Question

Sto provando a eseguire il rendering di una linea verticale quando si passa sopra l'area del tracciato in chartjs v2. Ho una versione di base di lavoro ma non ho capito come rimuovere la linea ogni volta che viene tracciata la linea (le vecchie linee restano attaccate).

Ecco un esempio di lavoro - 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; 
}; 

Nota ho visto altre soluzioni per questo se un secondo strato di tela è utilizzato sopra delle tele grafico - Non sembra che è un'opzione per me come ho bisogno della linea verticale per apparire in cima al grafico, ma al di sotto di un tooltip personalizzato che realizzerò.

Qualsiasi suggerimento è apprezzato, grazie!

Answer 1

Basta aggiungere le seguenti righe prima di disegnare la linea

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

Tra l'altro, la vostra linea non si estendono fino alla parte inferiore. Se si desidera allungare completamente verso il basso, utilizzare 0 e this.chart.height per yStart e yEnd. Oppure è possibile utilizzare la scala dell'asse y per calcolare i pixel massimo e minimo per la scala (vedere https://jsfiddle.net/ombaww9t/).

---

Fiddle - https://jsfiddle.net/56s9av1j/

Answer 2

versione Working for 2.6.0 (cambiamento 'asse y-0' per l'id di voi asse 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; 
};