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

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 解决了问题
• 将渲染器更改为 'stack' 可以解决问题（即使使用线渲染器，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();