javascript - 人力车:使用线渲染器和 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 解决了这个问题
• 将渲染器更改为“堆栈”可以解决问题(即使使用线渲染器，Hover 似乎也位于堆栈位置)

Answer 1

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

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();