簡體   English   中英

在touchend上沒有刪除ChartJS垂直線

[英]ChartJS vertical line not removed on 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();
      }
   }
});

在懸停結束后該線被移除,但是如果發生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");
     }
   }
});

但是唯一可以觸摸的事件是mousemove,touchend和mouseout在移動/觸摸上不起作用。 有沒有解決方法?

似乎問題是“touchend”事件已從默認配置中刪除。

將事件“touchend”重新添加到這樣的選項中,在touchend之后刪除工具提示。

events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]

這在這里改了: https//github.com/chartjs/Chart.js/pull/1644/files

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM