如何在chartjs中呈现悬停时的垂直线
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/)。
Fiddle-https://jsfiddle.net/56s9av1j/
2.6.0的工作版本(将"y轴-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;
};
相关文章:
- 当鼠标悬停在文本中的单词上时显示警报
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 手风琴可点击并悬停
- 悬停功能触发器
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- css(或jQuery)悬停时淡入淡出
- jquery快速悬停问题
- 如何在悬停时流畅地更改单词
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 使用Javascript,如何显示<tr>在另一<tr>悬停时,隐藏第二个<tr>
- 在鼠标悬停时展开列表
- 导航菜单-悬停时的背景行为怪异
- OpenLayers在悬停时高亮显示功能,并在单击时选择
- jQuery悬停在没有鼠标悬停的情况下启动
- 鼠标悬停时如何居中放大背景图像
- 如何在chartjs中呈现悬停时的垂直线