Question

我是Rickshaw JS工具包的新手。在示例中，在http://code.shutterstock.com/rickshaw/examples/extensions.html处，用于选择时间范围的图表底部的预览栏（Rickshaw.Graph.RangeSlider）默认为可用的总时间范围。

如何将默认预览自定义为RangeSlider的最后一分钟和最小预览宽度？

先谢谢。

Answer 1

它看起来所有缩放和预览重绘内容都在mousemove handler内完成。所以除了使用那些事件处理程序之外，似乎没有任何方法可以更改或默认预览宽度 - 奇怪的是它没有在某处被考虑到因此你可以手动设置缩放？

作为一个可怕的黑客，您可以明确触发一系列鼠标事件来模拟鼠标按下/拖动/向上，根据您要移动到的容器宽度的任何部分设置clientX值。例如（在Chrome中）我们将mousedown发送到左手柄，然后鼠标移动鼠标到文档，其中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);

Answer 2

我知道这个问题已经过时了，但是如果有人遇到同样的问题：不要伪造鼠标事件。查看滑块的代码，滑动时的作用是设置图形窗口的xMin和xMax，然后更新它。我们也可以这样做 - 在图形调用初始化之后：

// lower limit            
graph.window.xMin = 5;
// upper limit
graph.window.xMax = 10;
// this will also update the slider
graph.update();

如何将默认预览宽度设置为Rickshaw.Graph.RangeSlider

2 个答案: