Question

我有一个负值的面积图。没有什么与the example they give完全不同，但有一个转折：我想保持零在Y轴上居中。

我知道这可以通过将yAxis.max设置为某个值 n 并将yAxis.min设置为 -n 来实现，其中 n 表示图表峰值或谷值的绝对值，以较大者为准（如this fiddle中所示）。但是，我的数据是动态的，所以我不能提前知道 n 需要做什么。

我对Highcharts相对较新，所以我可能错过了通过配置来实现这一目标的方法，让Highcharts为我照顾它，但它看起来很棒就像我需要使用Javascript在页面加载时自己手动调整y轴，并随着新数据的进入。

是否有一种简单的，配置驱动的方法来保持零点以Y轴为中心？

Answer 1

在深入挖掘Highcharts API之后，我最终找到了通过配置完成此操作的方法。每个轴都有一个名为tickPositioner的配置选项，您可以为其提供返回数组的函数。此数组包含您希望刻度线出现在轴上的确切值。这是我的新tickPositioner配置，它在我的Y轴上放置了五个刻度，零中间整齐，两个极端最大：

yAxis: {

    tickPositioner: function () {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [-maxDeviation, -halfMaxDeviation, 0, halfMaxDeviation, maxDeviation];
    },

    ...
}

Answer 2

我知道这是一篇很老的帖子，但我认为无论如何我会发布我的解决方案（灵感来自上面接受的答案中提到的一个macserv），因为它可能会帮助其他寻找类似解决方案的人：

tickPositioner: function (min, max) {
            var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
            return this.getLinearTickPositions(this.tickInterval, -maxDeviation, maxDeviation);
        }

Answer 3

您可以使用getExtremes和setExtremes方法

执行此操作

示例：

http://jsfiddle.net/jlbriggs/j3NTM/1/

var ext = chart.yAxis[0].getExtremes();

Answer 4

这是我的解决方案。关于这一点的好处是你可以保持tickInterval。

  tickPositioner(min, max) {
    let { tickPositions, tickInterval } = this;
    tickPositions = _.map(tickPositions, (tickPos) => Math.abs(tickPos));
    tickPositions = tickPositions.sort((a, b) => (b - a));

    const maxTickPosition = _.first(tickPositions);
    let minTickPosition = maxTickPosition * -1;

    let newTickPositions = [];
    while (minTickPosition <= maxTickPosition) {
      newTickPositions.push(minTickPosition);
      minTickPosition += tickInterval;
    }

    return newTickPositions;
  }

Answer 5

以防有人在搜索，

更多选择。我最终陷入了类似的境地。遵循我的解决方案：

tickPositioner: function () {
    var dataMin,
    dataMax = this.dataMax;
    var positivePositions = [], negativePositions = [];

    if(this.dataMin<0) dataMin = this.dataMin*-1;
    if(this.dataMax<0) dataMax = this.dataMax*-1;

    for (var i = 0; i <= (dataMin)+10; i+=10) {
        negativePositions.push(i*-1)
    }

    negativePositions.reverse().pop();

    for (var i = 0; i <= (dataMax)+10; i+=10) {
        positivePositions.push(i)
    }

    return negativePositions.concat(positivePositions);

},

http://jsfiddle.net/j3NTM/21/

Highcharts - 在Y轴上以负值保持零中心

5 个答案: