小编ubi*_*bik的帖子

ChartJS 垂直线未在 touchend 上删除

我使用这个插件在用户触摸/悬停在图表上的位置绘制一条垂直线:

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();
      }
   }
});
Run Code Online (Sandbox Code Playgroud)

悬停结束后,该线会被删除,但是如果发生 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(); …
Run Code Online (Sandbox Code Playgroud)

javascript touch chart.js

5
推荐指数
1
解决办法
1174
查看次数

标签 统计

chart.js ×1

javascript ×1

touch ×1