人力车：当使用线条渲染器加上RangeSlider.Preview时，HoverDetail位于错误的位置

Question

我有两行Rickshaw Graph。

我需要Rickshaw.Graph.RangeSlider.Preview和Rickshaw.Graph.HoverDetail：

var graph = new Rickshaw.Graph( {
    element: document.getElementById('chart'),
    renderer: 'line',
    width: 400,
    height: 300,
    offset: 'value',
    series: [
        {
            name: 'foo',
            data: seriesData.shift(),
            color: 'rgba(255, 0, 0, 0.4)'
        }, {
            name: 'bar',
            data: seriesData.shift(),
            color: 'rgba(255, 127, 0, 0.4)'
        }
    ]
} );

var slider = new Rickshaw.Graph.RangeSlider.Preview({
    graph: graph,
    element: document.getElementById('preview')
});

var detail = new Rickshaw.Graph.HoverDetail({
    graph: graph
});

graph.render();

http://jsfiddle.net/nsams/1jfswzp5/3/

我的问题

我现在的问题是，悬停显示在无效位置：

到目前为止我发现了什么：

• 删除RangeSlider.Preview修复了问题
• 将渲染器更改为＆＃39; stack＆＃39;修复了问题（即使使用行渲染器，看起来像悬停在堆栈位置）

Answer 1

在stack:false构造函数中设置Rickshaw.Graph：

var graph = new Rickshaw.Graph( {
    element: document.getElementById('chart'),
    renderer: 'line',
    width: 400,
    height: 300,
    offset: 'value',
    stack: false,
    series: [
        {
            name: 'foo',
            data: seriesData.shift(),
            color: 'rgba(255, 0, 0, 0.4)'
        }, {
            name: 'bar',
            data: seriesData.shift(),
            color: 'rgba(255, 127, 0, 0.4)'
        }
    ]
} );

var slider = new Rickshaw.Graph.RangeSlider.Preview({
    graph: graph,
    element: document.getElementById('preview')
});

var detail = new Rickshaw.Graph.HoverDetail({
    graph: graph
});

graph.render();