放大後y軸在高位圖中不對齊

Question

在我的應用程序中，我創建了一個highcharts對象，並將zoomtype設置爲xy。由於數值範圍不同（例如，一個數據集可能具有無限最大值，而其他基於百分比的值限制爲100/-100），每個數據集都有其自己的y軸。如果加載一個只有正值的數據集和一個包含正值和負值的數據集，我可以很好地對齊y軸的零點。

但是，在放大時，零點將會不一致。如果我放大20到-10的範圍，沒有任何負值的數據集將只顯示20到0的範圍。重置縮放後，一切都很好。如果我使用默認情況下通過高位圖添加的y軸，則柱狀圖的柱狀圖在放大時會很好地對齊。但是，這並不能解決零錯位的問題。我已經遇到了這個問題幾天了，我似乎無法解決它。我嘗試過使用yAxis設置和圖形的其他設置，但是這對我來說也沒有解決任何問題。

任何幫助將不勝感激，如果需要，我可以提供一些我的代碼。

代碼將Y軸：

chart.axes[0].setExtremes(chart.axes[0].dataMin, chart.axes[0].dataMax); 
var yAxes = chart.yAxis; 
var negativeVals = false; 

// Check if any of the yAxes contain negative values in the associated dataset 
for (var axis in yAxes){ 
    var minVal = yAxes[axis].dataMin; 
    if (minVal < 0){ 
     negativeVals = true; 
    } 
} 

// Loop through the y-axes 
for (var axis in yAxes){ 

    // Get the min and max vals of the associated dataset 
    var minVal = yAxes[axis].dataMin; 
    var maxVal = yAxes[axis].dataMax; 

    // If we have any negative values 
    if (negativeVals){ 

     // Boolean to determine if the maximum value is larger than the minimum 
     var maxGreaterThanMin = maxVal >= (minVal * -1); 

     // If the maximum value is greater than the absolute minimum value 
     if (maxGreaterThanMin){ 

      // Calculate min and max 
      var maximum = maxVal; 
      var minimum = maxVal * -1; 

      // Set the extremes of the yAxis 
      yAxes[axis].setExtremes(minimum, maximum, false); 
     } 

     // If the absolute minval is greater than the max value 
     else{ 

      // Calculate the min and max 
      var maximum = minVal * -1; 
      var minimum = minVal; 

      // Set the extremes of the yAxis 
      yAxes[axis].setExtremes(minimum, maximum, false); 
     } 
    } 

    // If there are no negative values present at all, we can set the range from 0 to maxVal 
    else{ 
     yAxes[axis].setExtremes(0, maxVal, false); 
    } 

} 

chart.xAxis[0].isDirty = true; 
chart.redraw(); 

編輯：

function addYAxis(opposite){ 
chart.addAxis({ 

    // set ID to axis number 
    id: yAxisCounter, 

    // Don't align the labels on the y-axis 
    alignTicks: false, 

    // Don't allow decimals values on the axis labels 
    allowDecimals: false, 

    // set max padding to 0 
    maxPadding: 0, 

    // set minimum padding to 0 so the chart does not add any padding 
    minPadding: 0, 

    // Hide this axis if it doesn't have associated values and/or labels 
    showEmpty: false, 

    // Set the space between labels on the axis 
    //tickInterval: tickInterval, 
    tickPixelInterval: 25, 

    // set the color of the gridlines in the chart 
    gridLineColor: '#FFFFFF', 

    // set the location of the yAxis 
    opposite: opposite, 

    // Construct label value that is shown when hovering over a bar in the chart 
    labels: { 
      formatter: function(){ 
       return this.value; 
      }, 
      style: { 

       // Set the color of the label text 
       color: getColor(), 

       // Set the letter size of the label text 
       fontSize: 10 
      } 
    } 
}); 
} 

function addSeries(id, vals){ 
// Add a series of data to the chart; 
chart.addSeries({ 

    // Construct series name 
    name: id, 

    // Construct identifier to we can distinguish different datasets 
    identifier: id, 

    // Set the data 
    data: vals, 

    // Link these series to the current y-Axis 
    yAxis: yAxisCounter, 

    // Make this series visible 
    visible: true, 

    // Don't add shadows' 
    shadow: false, 

    // Set the color of the bars associated to these values 
    color: getColor() 
}); 
} 

碼復位變焦後，通過覆蓋放大時的默認行爲解決了這個問題，我使用的最小值和最大值選擇事件的值來設置x軸的極值。之後，我將y軸的零值與重置縮放後調用的編碼版本的代碼對齊。小提琴：http://jsfiddle.net/5m9JW/355/

希望這也可以幫助人們遇到同樣的問題。

Answer 1

通過重寫放大時的缺省行爲問題解決了，我使用的分鐘，並選擇事件的最大值來設定x軸的極值。之後，我將y軸的零值與重置縮放後調用的編碼版本的代碼對齊。小提琴：http://jsfiddle.net/5m9JW/355/此示例爲多軸

See JS fiddle for my solution 

希望這也能幫助人們指出，碰上同樣的問題。

Answer 2

不幸的是，Highcharts沒有提供選項來將yAxis排列在同一個值中（如您的案例中的0值）。我有一個前一陣子準備例子做出同樣的姿勢兩軸：http://jsfiddle.net/5m9JW/349/你或許應該能夠升級以獲得相同的多個軸

while (chart.yAxis[1].translate(0) != chart.yAxis[0].translate(0) && i > 0) { 
    chart.yAxis[0].setExtremes(chart.yAxis[0].getExtremes().min - chart.yAxis[0].translate(chart.yAxis[1].translate(0), true)); 
    i--; 
}; 

另外，我覺得toPixels()和toValue()會更容易使用比translate()。