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

我有一个人力车图，上面有多个数据系列（线图）

我决定在图形的底部具有鼠标悬停的详细信息以及范围滑块的预览-但是，当我将鼠标悬停在线条上方时，该细节始终只能“捕捉”到一行。如果我将范围滑块预览移开，则悬停细节效果很好。

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

程式码片段：

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

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

最佳答案

似乎人力车中的多重图默认情况下具有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
              });