当我将鼠标悬停在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;
};
注意我已经看到了其他解决方案,在图表画布的顶部使用了第二个画布层 - 我不认为这是我的选项,因为我需要垂直线出现在图表,但在我将实施的自定义工具提示下方。
感谢任何建议,谢谢!
答案 0 :(得分:5)
只需在绘制线条之前添加以下行
<script>
$(document).ready(function () {
$('#todoItem').change(function () {
$('<li />').append(
$('<input type="checkbox" name="' + this.value + '" id="' + this.value + '">')
.click(function () {
var $this = this;
alert('tell me ' + $this.name);
})//click
)//append
.append('<label for="' + this.value + '">' + this.value + '</label>')
.appendTo($("#showList ul"));
});
});
</script>
顺便说一句,你的线路并没有一直延伸到底部。如果你想让它一直向下伸展,请使用...
this.clear();
this.draw();
...
和0
作为你的yStart和yEnd。或者您可以使用y轴刻度来计算刻度的最大和最小像素(请参阅https://jsfiddle.net/ombaww9t/)。
答案 1 :(得分:2)
2.6.0的工作版本(更改&#39; y轴-0&#39;到你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;
};