0

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

然而，在放大时，零点不对齐。如果我放大 20 到 -10 的范围，没有任何负值的数据集只会显示 20 到 0 的范围。重置缩放后一切都很好。如果我使用 highcharts 默认添加的 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/

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

4

2 回答 2

0

不幸的是，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().

于 2013-08-05T11:54:28.833 回答
0

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

See JS fiddle for my solution

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

于 2013-08-06T08:37:33.473 回答