Рикша — несовместимость между 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();

Скриншот — моя мышь на самом деле выше верхней зеленой линии screenshot_graph


javascript charts rickshaw
person petula    schedule 23.12.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Кажется, мультиграфы в Rickshaw имеют stack:true по умолчанию. Это смещает расположение деталей при наведении относительно фактических линий графика. Это также вызывает другие проблемы, такие как не разрешать несколько серий с разным количеством точек. Чтобы исправить это, просто установите stack:false в аргументах конструктора Graph, например:

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
              });
person spadequack    schedule 02.01.2015