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/

親切的問候。