如何在 Highcharts 中设置轴的最小上限？答案

【问题标题】：How do I set a minimum upper bound for an axis in Highcharts?如何在 Highcharts 中设置轴的最小上限？
【发布时间】：2012-02-08 22:00:58
【问题描述】：

我正在尝试设置一个最小上限，具体来说：

Y 轴应从 0 开始
Y 轴应至少达到 10 或更高（自动缩放）
Y 轴的上限不得小于 10。

似乎是 Highcharts 所做的，但我似乎无法弄清楚如何做。有人有这方面的经验吗？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

Highcharts 似乎没有在图表创建时执行此操作的选项。但是，他们确实公开了几种方法来询问极端情况并改变极端情况，getExtremes() 和 setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) 在他们的documentation 中找到。

因此，一个可能的解决方案（在图表创建之后）：

if (chart.yAxis[0].getExtremes().dataMax < 10) {
   chart.yAxis[0].setExtremes(0, 10);
}

yAxis[0] 引用第一个 y 轴，我假设在这种情况下您只有一个轴。 doc 解释了如何访问其他轴。

这并不理想，因为图表必须重新绘制，这不太明显，但它仍然存在。希望 Highcharts 可以将这种功能内置到选项中。

【讨论】：

您可以通过在图表的load 事件中设置new Highcharts.Chart({ chart: { events: { load: function(event) {if (this.yAxis[0].getExtremes().dataMax < 10) { this.yAxis[0].setExtremes(0, 10); } } }, ... }, ...}); 来避免重绘闪烁：new Highcharts.Chart({ chart: { events: { load: function(event) {if (this.yAxis[0].getExtremes().dataMax < 10) { this.yAxis[0].setExtremes(0, 10); } } }, ... }, ...});
太糟糕了，没有办法更干净地做到这一点。如果我有几分钟的时间，也许我会分叉回购并修复它。
查看 Ondkloss 的回答

【解决方案2】：

仅使用选项（无事件或函数）执行此操作的方法是：

yAxis: {
    min: 0,
    minRange: 10,
    maxPadding: 0
}

这里minRange 定义了轴的最小跨度。 maxPadding 默认为 0.01，这会使轴长于 10，因此我们将其设置为零。

这会产生与setExtreme 相同的结果。见this JSFiddle demonstration。

【讨论】：

【解决方案3】：

添加到Julian D's very good answer，如果您计算的最大值的位数与您期望的上限不同，则以下内容可避免潜在的重新定位问题。

在我的情况下，我的百分比数据目前进入 20 年代，但我想要一个 0 到至少 100 的范围，如果需要，有可能超过 100，所以下面在代码中设置最小值和最大值，然后如果dataMax 结果更高，将 max 重新分配为其值。这意味着图形定位始终为 3 位数的值计算足够的空间，而不是为 2 位数计算然后通过挤压“100”来打破，但在出现问题之前最多允许“999”。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                thisSetMax = this.yAxis[0].getExtremes().max;
                thisDataMax = this.yAxis[0].getExtremes().dataMax;
                if (thisDataMax > thisSetMax) {
                    this.yAxis[0].setExtremes(0, thisDataMax);
                    alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax);
                }
            }
        }        
    },
    title: {
        text: 'My Graph'
    },
    xAxis: {
        categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013']
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: '% Due Tasks Done'
        }
    }
    //Etc...
});

【讨论】：

【解决方案4】：

HigtCharts 对所有方法都有很好的文档和示例。

http://www.highcharts.com/ref/#yAxis--min

在你的情况下，我认为你应该使用“yAxis”的“min”和“max”属性。

分钟：数字轴的最小值。如果为 null，则自动计算最小值。如果 startOnTick 选项为 true，则最小值可能会向下舍入。默认为空。

最大值：数字轴的最大值。如果为 null，则自动计算最大值。如果 endOnTick 选项为真，最大值可能会向上取整。实际最大值也受 chart.alignTicks 的影响。默认为空。

如果你是动态创建图表，你应该设置

分钟=0 max=10 ，如果您的所有数据值都小于 10

和

只有 min=0，如果你的值大于 10

祝你好运。

【讨论】：

【解决方案5】：

尝试以轴为单位设置轴的最小值和刻度线的间隔，如下所示：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    yAxis: {
        min: 0,
        max: 10,
        tickInterval: 10
    }
});

别忘了设置最大值。

希望对您有所帮助。

【讨论】：