Question

在我的应用程序中，我创建了一个highcharts对象，其zoomtype设置为xy。由于不同的值范围，每个数据集具有其自己的y轴（例如，一个数据集可以具有无限最大值，而其他基于百分比的值被限制为100 / -100）。如果加载了仅具有正值的数据集和具有正值和负值的数据集，我可以很好地对齐y轴的零点。

然而，在放大时，零点不对。如果我放大20到-10的范围，没有任何负值的数据集将只显示20到0的范围。重置缩放后，一切都很好。如果我使用默认情况下由高位图添加的y轴，则列图表的条形在放大时会很好地对齐。但是，这并不能解决零点不对称的问题。我已经遇到了这个问题几天了，我似乎无法解决它。我尝试过使用yAxis设置和图表的其他设置，但这对我来说也没有解决任何问题。

任何帮助都将不胜感激，如果需要，我可以提供一些代码。

添加y轴的代码：

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()
});
}

重置缩放后的代码：

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();

编辑：通过在放大时覆盖默认行为来解决问题。我使用选择事件的最小值和最大值来设置x轴的极值。之后，我将y轴的零值与重置缩放后调用的编辑版本的代码对齐。小提琴：http://jsfiddle.net/5m9JW/355/

希望这也可以帮助那些遇到同样问题的人。

Answer 1

不幸的是，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()更容易使用。

Answer 2

通过在放大时覆盖默认行为来解决问题。我使用选择事件的最小值和最大值来设置x轴的极值。之后，我将y轴的零值与重置缩放后调用的编辑版本的代码对齐。小提琴：http://jsfiddle.net/5m9JW/355/此示例适用于多个轴

See JS fiddle for my solution

希望这也可以帮助那些遇到同样问题的人。

放大后，y轴在高位图中未对齐

2 个答案: