在highcharts中实现滑块

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

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

所以我想也许事情就不是试图把一个jQuery UI滑块图表 - 使用渲染图中绘制一个滑块。尽管如此，我仍然没有办法将它绑定到xAxis，以便我的滑块与其创建的线对齐。

我会解决使用xAxis十字准线，除非他们只显示当你在一个点上悬停。我需要它显示所有的时间 - 无论你沿着xAxis的哪个位置。

So - 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的利润率相匹配的但这似乎是一个非常脆弱的解决方案，并且可能依赖于浏览器的排列顺序。

谢谢！

来源

2014-11-23 andrewdalb

有一点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。

来源

2014-11-23 21:49:28 Mark

在highcharts中实现滑块

回答

相关问题