javascript - 人力车 - HoverDetail 和 RangeSlider 之间不兼容

Question

我有一个人力车图，上面有多个数据系列(折线图)

我决定在图表底部显示悬停细节和范围 slider 预览 - 但是当我将鼠标悬停在线条上时，细节总是“捕捉”到一条线。如果我取消范围 slider 预览，它的悬停细节工作正常。

有人知道怎么回事吗？提前致谢。

代码片段:

var graph = new Rickshaw.Graph( {
                    element: document.querySelector('#timeSeriesPlot_'+index),
                    series: chartData,
                    renderer: 'multi',
                    width: jQuery('.chartAndLegend').width()-100,
                    height: 500,
                    dotSize: 2
              });

var xAxis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

var yAxis = new Rickshaw.Graph.Axis.Y( {
              graph: graph,
              orientation: 'left',
              element: document.querySelector('#y_axis_'+index)
          } );

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

var slider = new Rickshaw.Graph.RangeSlider.Preview({
                    graph: graph,
                    element: document.querySelector('#slider_'+index)
                  });

var legend = new Rickshaw.Graph.Legend({
                    graph: graph,
                    element: document.querySelector('#legend_'+index)
               });

var toggle = new Rickshaw.Graph.Behavior.Series.Toggle({
                graph: graph,
                legend: legend
              });

graph.render();

屏幕截图 - 我的鼠标实际上在顶部绿线上方

Answer 1

Rickshaw 中的 Multi graphs 似乎默认有 stack:true。这使得悬停细节位置偏离实际图形线。它还会导致其他问题，例如 not allowing multiple series with different numbers of points .要修复，只需在 Graph 构造函数参数中设置 stack:false，如:

var graph = new Rickshaw.Graph( {
                    element: document.querySelector('#timeSeriesPlot_'+index),
                    series: chartData,
                    renderer: 'multi',
                    width: jQuery('.chartAndLegend').width()-100,
                    height: 500,
                    dotSize: 2,
                    stack: false
              });