Question

我正在尝试将jquery滑块绑定到highcharts散点图。滑块位于图表的正下方，它的作用是在图表中绘制一条垂直线作为用户的参考点。我有一切正常工作，除了滑块不会与它创建的线对齐（因为它并没有真正与xAxis绑定）。

我似乎无法找到一种直接的方法来执行此操作，如果/当用户放大图表时它会进一步复杂化 - 然后需要重新计算滑块值以匹配现在可见的绘图区域（如果需要，我愿意禁用缩放。

所以我想也许要做的事情不是试图将jQuery UI Slider绑定到图表 - 使用Renderer在图表中绘制一个滑块。虽然，我仍然没有办法将它绑定到xAxis，以便我的滑块与它创建的线对齐。

我会满足于使用xAxis十字准线，除非它们仅在您悬停在一个点上时显示。我需要它一直显示 - 无论你在xAxis的哪个地方。

所以 - 1.有没有办法将滑块绑定到Highchart，以便它与xAxis完美排列。 2.如果没有，有没有办法使用内置的xAxis十字准线但是一直显示它们而不仅仅是在数据点上？

这是一个与我在实际项目中所做的事情很接近的例子：
http://jsfiddle.net/5hk0d6do/23/

       $('#container').highcharts({options}, function(chart){

        $slider = $('#slider');
        $slider.slider({
            min: chart.axes[0].min,
            max: chart.axes[0].max,
            slide : function(event, ui){
                var plotX = chart.xAxis[0].toPixels(ui.value, false);
                $('#slider_bar').remove();
                chart.renderer.path(['M', plotX, 75, 'V', plotX, 300]).attr({
                    'stroke-width': 1,
                    stroke: 'rgba(223, 83, 83, .5)',
                    id : 'slider_bar'
                })
                .add();  
            }
        }); 
        $slider.slider('option', 'slide').call($slider, null, { value: chart.axes[0].min });                                    
});

确实，我可以尝试推动滑块div的边距以匹配图表，但这似乎是一个非常脆弱的解决方案，并且可能非常依赖浏览器，因为它排列得有多好。

谢谢！

Answer 1

有了一些jQuery帮助，我不明白为什么你不能正确定位。尽管可以动态地改进跨浏览器结果：

var $slider = $('#slider');
var xaxis = chart.axes[0];
var containerOff = $('#container').offset();

$slider.slider({
  min: xaxis.min,
  max: xaxis.max,
  slide: function(event, ui) {
    var plotX = xaxis.toPixels(ui.value, false);
    $('#slider_bar').remove();
    chart.renderer.path(['M', plotX, 75, 'V', plotX, 300]).attr({
      'stroke-width': 1,
      stroke: 'rgba(223, 83, 83, .5)',
      id: 'slider_bar'
    })
      .add();
  }
});

// now that it is drawn, position it dynamically
$slider.css({
  'width':xaxis.len,
  'position': 'absolute',
  'left': chart.plotLeft + containerOff.left
});

这是一个example。

在highcharts中实现滑块

1 个答案: