在highcharts中实现滑块

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

我似乎找不到一个简单的方法来实现这一点，如果/当用户放大图表时，情况会更加复杂-然后需要重新计算滑块值以匹配现在可见的绘图区域（如果需要，我愿意禁用缩放）

因此，我认为也许应该做的是，不要尝试将jQueryUI滑块绑定到图表上，而是使用渲染器在图表中绘制一个滑块。尽管如此，我仍然没有办法将它绑定到xAxis，这样我的滑块就可以与它创建的线对齐

我同意使用xAxis十字光标，但它们仅在您悬停在某个点上时显示。我需要它一直显示——不管你在X轴上的什么位置

所以- 1.是否有一种方法可以将滑块与海图绑定，使其与X轴完美对齐。 2.如果没有，是否有一种方法可以使用内置的xAxis十字准线，但可以始终显示它们，而不仅仅是在数据点上

下面是一个与我在实际项目中所做工作非常接近的示例：

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

---

谢谢

有了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
});

这是一个例子

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