Highcharts - 保持以零为中心的Y轴负值 [英] Highcharts - Keep Zero Centered on Y-Axis with Negative Values

问题描述

我有一个负值的面积图。与他们给出的例子没有什么不同，但有一个转折点：我想保持零中心位于Y轴。

I have an area chart with negative values. Nothing insanely different from the example they give, but there's one twist: I'd like to keep zero centered on the Y axis.

我知道这可以通过设置 yAxis.max 来实现值 n 和 yAxis.min 改为 -n ，其中 n 代表绝对值无论是图表还是波谷的峰值，以较大者为准（如小提琴）。但是，我的数据是动态的，所以我不知道什么时候需要。

I know this can be achieved by setting the yAxis.max to some value n and yAxis.min to −n, with n representing the absolute value of either the peak of the chart or the trough, whichever is larger (as in this fiddle). However, my data is dynamic, so I don't know ahead of time what n needs to be.

我相对较新Highcharts，所以有可能我错过了通过配置完成此操作的一种方式，并让Highcharts为我处理它，但看起来我需要使用Javascript手动调整页面加载时的y轴，并且随着新的数据进入。

I'm relatively new to Highcharts, so it's possible I'm missing a way to do this through configuration and let Highcharts take care of it for me, but it's looking like I'll need to use Javascript to manually adjust the y axis myself when the page loads, and as new data comes in.

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

Is there an easy, configuration-driven way to keep zero centered on the Y axis?

推荐答案

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

I ended up finding a way to do this through configuration after digging even further into the Highcharts API. Each axis has a configuration option called tickPositioner for which you provide a function which returns an array. This array contains the exact values where you want ticks to appear on the axis. Here is my new tickPositioner configuration, which places five ticks on my Y axis, with zero neatly in the middle and the max at both extremes :

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];
    },

    ...
}

这篇关于Highcharts - 保持以零为中心的Y轴负值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！