[英]How to render a vertical line on hover in chartjs
當我將鼠標懸停在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();
...
順便說一句,你的線不會一直延伸到底部。 如果你想讓它一直向下伸展,使用0
和this.chart.height
為你的yStart和yEnd。 或者您可以使用y軸刻度來計算刻度的最大和最小像素(請參閱https://jsfiddle.net/ombaww9t/ )。
2.6.0的工作版本(將'y-axis-0'更改為y軸的id)
// 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;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.