plotly rangeslider 如何确定是不是选择了范围

Posted 2023-02-18

【中文标题】plotly rangeslider 如何确定是不是选择了范围

【英文标题】：plotly rangeslider how to determine if range is selectedplotly rangeslider 如何确定是否选择了范围

【发布时间】：2017-03-14 03:01:20

【问题描述】：

需要知道何时完成对范围滑块的拖动。添加 'dragend' 上的 sliderDiv 上的事件仅偶尔产生 通知。在 plotly_relayout 上收听太多 事件。

【问题讨论】：

你能添加生成图表和滑块的代码吗？

@mei：你对我的回答满意吗？我会对你的完整解决方案感兴趣

@flipperweid，我有一个更老套的解决方案，但它遵循与您类似的逻辑线。 $('#mySliderViewer').on('plotly_relayout', function(event, arguments) var _arg=arguments; var _keys = Object.keys(_arg); var _str=_keys[0]; //window.console.log("relayout for ..",_str); if( _str == "xaxis.range") minmaxAgain(); );

【参考方案1】：

我认为尚不支持像“plotly_rangeslider_dragend”这样的事件。所以你必须使用一种解决方法。

要确定 rangeslider 事件，您可以使用“plotly_relayout”并查看 eventdata-Object，如下面的代码：

var timer=undefined;
var plotlyRelayoutEventFunction=function(eventdata)
  if( Object.prototype.toString.call(eventdata["xaxis.range"]) === '[object Array]' ) 
    console.log("rangeslider event!!");

    if(timer!==null)
      //timer is running: stop it
      window.clearTimeout(timer);
    

    timer = window.setTimeout(function() 
      //fire end event
      console.log("rangeslider event ENDS");

      //reset timer to undefined
      delete timer;
      timer=undefined;
    , 800);
  

第一个 if 语句检查 eventdata 字段“xaxis.range”是否为数组。如果是，则为范围滑动事件。 （相比之下，缩放事件与此类似，但它不是数组）。

要确定 rangeslider 事件的结束，您可以使用计时器。如果新事件在 800 毫秒的时间范围内出现，则它不是结束并且计时器重新启动。如果 800 毫秒结束，并且 rangeslider-end-event 中没有新事件发生。

当然这不是完整的解决方案，因为用户可以等待 800 毫秒而不释放滑块。因此，您也必须使用一些鼠标事件来构建一个真正正确的 rangeslider-end-event。希望这会引导您朝着正确的方向前进。我认为有很多方法可以解决它。

这里是一个完整的 jsfiddle 示例，基于 plotly 网站示例的rangeslider 并触发一个rangeslider-end-event 到控制台：https://jsfiddle.net/7d03n2k1/

编辑：

我更新了我的代码：https://jsfiddle.net/7d03n2k1/1/ 原因 window.setTimout(...) 返回一个 Id 并且没有对象代码是错误的。