Javascript 触摸端未删除ChartJS垂直线
我使用此插件在用户触摸/悬停在图表上的位置绘制一条垂直线:Javascript 触摸端未删除ChartJS垂直线,javascript,touch,chart.js,Javascript,Touch,Chart.js,我使用此插件在用户触摸/悬停在图表上的位置绘制一条垂直线: Chart.plugins.register({ afterDatasetsDraw: function(chart) { if (chart.tooltip._active && chart.tooltip._active.length) { var activePoint = chart.tooltip._active[0], ctx = chart.ctx
Chart.plugins.register({
afterDatasetsDraw: function(chart) {
if (chart.tooltip._active && chart.tooltip._active.length) {
var activePoint = chart.tooltip._active[0],
ctx = chart.ctx,
y_axis = chart.scales['y-axis-0'],
x = activePoint.tooltipPosition().x,
topY = y_axis.top,
bottomY = y_axis.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = '#26D4A5';
ctx.stroke();
ctx.restore();
}
}
});
悬停结束后,该行将被删除,但是如果发生touchend/touchcancel,该行仍然存在
我尝试将afterEvent添加到插件中,如下所示:
Chart.plugins.register({
afterDatasetsDraw: function(chart) {
if (chart.tooltip._active && chart.tooltip._active.length) {
var activePoint = chart.tooltip._active[0],
ctx = chart.ctx,
y_axis = chart.scales['y-axis-0'],
x = activePoint.tooltipPosition().x,
topY = y_axis.top,
bottomY = y_axis.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = '#26D4A5';
ctx.stroke();
ctx.restore();
}
},
afterEvent: function(chart, e) {
if(e.type=="mouseout"){
alert("mouseout");
}
if(e.type=="touchend"){
alert("touchend");
}
if(e.type=="mousemove"){
alert("mouse move");
}
}
});
但在touch上唯一有效的事件是mousemove、touchend和MousOut,它们在mobile/touch上不起作用。有什么解决方法吗?问题似乎是“touchend”事件已从默认配置中删除 将事件“touchend”重新添加到如下选项中,将删除touchend之后的工具提示
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]
这一点在此处更改: