HighCharts：在yAxis中的平移發生得太慢

我在yAxis中做了一個用於平移的小代碼，但它有點慢。如果我增加tickInterval的值，它會變得更快。但缺點是，隨着tickInterval的增加，當我拖動鼠標使其小於tickInterval大小時，代碼開始工作（嘗試在我的提琴中將tickInterval更改爲500，然後將鼠標拖動一分鐘，然後將鼠標拖動到一分鐘。HighCharts：在yAxis中的平移發生得太慢

我的鏈接。jsfiddle

相關代碼：

var mouseY; 
$(chart.container) 
.mousedown(function(event) { 
    mouseY=event.offsetY; 
    yData=chart.yAxis[0].getExtremes(); 
    yDataRange=yData.max-yData.min; 
    isDragging=true; 
}) 
.mousemove(function(e) { 
    var wasDragging = isDragging; 
    if (wasDragging) { 
     yVar=mouseY-e.pageY; 
     if(yVar!=0) { 
      yVarDelta=yVar/500*yDataRange; 
      chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta)); 
     } 
    } 
}) 
.mouseup(function (e) { 
    isDragging = false; 
});

也將不勝感激，如果有人能提供替代路線像素（e.pageY）轉換爲y座標正如你可以在代碼中看到，目前我。做一個解決方法。

編輯我在這個jsfiddle包括翻譯功能，並把邏輯，這樣的平移只發生在mouseup而不是在mousemove。我目前面臨的問題是，如果拖動小於滴答間隔時間，不僅代碼平移，而且縮放。我認爲它的發生是因爲yAxis最小值和最大值的變化發生在最小值和最大值上限處。

來源

2013-03-03 user1517108

這裏有一些問題。首先，當你調用setExtremes時，你的範圍變大（引起縮放效果）。這是因爲你沒有按照確切的時間間隔移動。您可以通過在y軸的刻度設定集/結束虛假治癒這種：

yAxis: { 
     min: -50, 
     tickInterval: 500, 
     startOnTick:false, 
     endOnTick:false 
    },

像素轉換成座標的方法是使用「翻譯」。我改變了你的第一個的jsfiddle如下： http://jsfiddle.net/uLHCx/

 if(yVar<-50 || yVar > 50) { 
      mouseY = e.pageY; 
      yVarDelta=yVar/100*yDataRange; 
      yVarDelta = chart.yAxis[0].translate(e.pageY) - chart.yAxis[0].translate(e.pageY - yVarDelta); 
      chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta)); 
     }

您可以通過更改yVarDelta計算改變滾動量。

請注意，我對yVar進行了範圍檢查，以便除非鼠標移動了給定的數量並重置了mouseY的值，否則我們不會重新顯示。

這可能不是你想要的，但它應該足以讓你根據需要進行修改。

來源

2013-03-04 13:13:59 SteveP

是否有可能具有雙軸，我們只能平移y軸中的一個，而不會影響另一個軸？ – Muhaimin 2014-07-01 04:46:36

我不確定你在問什麼。也許你應該提出一個完整的問題，並詳細說明你正在嘗試做什麼，以及你已經嘗試了什麼。 – SteveP 2014-07-01 07:34:03

我是新來的高圖javascript。我沒有樣品可以展示它。但是我看到一個圖表有兩個Y軸，左右。我可以上下拖動一個軸而不影響另一個軸。 – Muhaimin 2014-07-01 07:49:28

HighCharts：在yAxis中的平移發生得太慢

回答

相關問題