我是 Rickshaw JS 工具包的新手。在 http://code.shutterstock.com/rickshaw/examples/extensions.html的示例中,用于选择时间范围的图表底部的预览栏 (Rickshaw.Graph.RangeSlider) 默认为总时间可用框架。
如何将默认预览自定义为 RangeSlider 的最后一分钟和最小预览宽度?
提前致谢。
我是 Rickshaw JS 工具包的新手。在 http://code.shutterstock.com/rickshaw/examples/extensions.html的示例中,用于选择时间范围的图表底部的预览栏 (Rickshaw.Graph.RangeSlider) 默认为总时间可用框架。
如何将默认预览自定义为 RangeSlider 的最后一分钟和最小预览宽度?
提前致谢。
我知道这个问题很老,但如果有人偶然发现同样的问题:不要伪造鼠标事件。查看滑块的代码,它在滑动时所做的是设置图形窗口的xMin
和xMax
然后更新它。我们也可以这样做——在图形调用初始化之后:
// lower limit
graph.window.xMin = 5;
// upper limit
graph.window.xMax = 10;
// this will also update the slider
graph.update();
看起来所有的缩放和预览重绘都是在mousemove 处理程序中完成的。因此,除了使用这些事件处理程序之外,似乎没有任何方法可以更改或默认预览宽度 - 奇怪的是它没有在某处分解,因此您可以手动设置缩放?
作为一个可怕的 hack,您可以显式触发一系列鼠标事件来模拟鼠标向下/拖动/向上,根据您想要移动到的容器宽度的任何分数设置 clientX 值。例如(在 Chrome 中)我们将 mousedown 发送到左侧句柄,然后将 mousemove ane mouseup 发送到文档,其中 w 是我的容器宽度,我想缩放到 t1 - t2 范围,而不是默认的 t0 - t2。
// fake handle move
edown = document.createEvent("HTMLEvents");
edown.initEvent("mousedown", true, true);
edown.clientX = 0;
emove = document.createEvent("HTMLEvents");
emove.initEvent("mousemove", true, true);
emove.clientX = 0.9 * w * (t1 - t0) / (t2 - t0) ;
eup = document.createEvent("HTMLEvents");
eup.initEvent("mouseup", true, true);
$('#slider .left_handle')[0].dispatchEvent(edown);
document.dispatchEvent(emove);
document.dispatchEvent(eup);