Highcharts Zooming with Scroll Bar

Question

在Highcharts中，有一个很好的功能可以缩放和窗格化该区域。但是为了使用平移 - 它应该与在这里的例子中提到的shift键结合使用。有没有办法在放大而不是平移时显示滚动条？

Answer 1

您可以使用渲染器，让您的自定义滚动条与它： http://api.highcharts.com/highcharts#Renderer.rect

你可以让两个矩形，一个为你的滚动条背景和第二你的滚动按钮。 http://api.highcharts.com/highcharts#Element.attr

chart.renderer.rect(0, height - 60, width, 20) 
     .attr({ 
     fill: '#666', 
     zIndex: 3, 
     visibility: 'hidden' 
     }).addClass('scroll') 
     .add(); 

您可以使用afterSetExtremes事件及其回调函数里面，你可以用你的复位变焦按钮的知名度连接您的滚动条的可见性：

可以使用ATTR（）来改变它们的属性 http://api.highcharts.com/highcharts#xAxis.events.afterSetExtremes

您需要计算滚动条和x位置的宽度。你可以通过你的坐标轴的最小和最大以及宽度的简单的数学比例来完成。例如，您可以设置宽度内重绘事件的回调函数：

redraw: function() { 
     var chart = this; 
     this.xAxis[0].displayBtn ? ($('.scrollBar').show() && $('.scroll').show()) : ($('.scrollBar').hide() && $('.scroll').hide()) 
     width = chart.chartWidth; 
     newWidth = width * (max - min)/(oldMax - oldMin); 
     $('.scroll').attr({ 
     width: width 
     }); 
     $('.scrollBar').attr({ 
     width: newWidth, 
     x: width * min/oldMax, 
     }); 
    } 

您需要的mousedown和鼠标移动事件添加到您的滚动条。你可以使用jQuery来完成。里面mousemove事件，你需要重新计算你的鼠标位置的滚动按钮筑底的x位置：

$('.scrollBar').on('mousedown', function() { 
     var mousePos; 
     $(this).bind('mousemove', function(e) { 
      $(this).attr({ 
      x: e.clientX + 70, 
      }) 
      chart.xAxis[0].setExtremes(min - ((mousePos || e.clientX) - e.clientX) * oldMax/width, max - ((mousePos || e.clientX) - e.clientX) * oldMax/width, true, false); 
      mousePos = e.clientX; 

     }); 
     }) 

在这里你可以看到一个例子是如何工作的： http://jsfiddle.net/LnneuLoy/8/

亲切的问候。