Question

我正在尝试设置最小上限，特别是：

Y轴应从0
Y轴应至少为10或更高（自动缩放）
Y轴的上限不应小于10.

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

Answer 1

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

所以，一个可能的解决方案（创建图表后）：

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

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

这不太理想，因为图表必须重绘不太明显，但它仍然存在。希望Highcharts能够在选项中获得这种功能。

Answer 2

仅使用选项（无事件或函数）的方法是：

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

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

这会产生与setExtreme给出的结果相同的结果。请参阅this JSFiddle demonstration。

Answer 3

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

在我的情况下，我的百分比数据目前进入20年代，但我希望范围从0到至少100，如果需要可能超过100，所以以下设置min＆amp;代码中的max，如果dataMax变得更高，则将max重新分配给它的值。这意味着图形定位总是在有足够的空间容纳3位数的情况下进行计算，而不是通过压缩“100”来计算2位数，然后在下次出现问题之前允许达到“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...
});

Answer 4

HigtCharts通过示例对所有方法都有很好的记录。

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

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

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

max：Number   轴的最大值。如果为null，则自动计算最大值。如果endOnTick选项为true，则最大值可能会向上舍入。实际最大值也受chart.alignTicks的影响。默认为null。

如果要动态创建图表，则应设置

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

和

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

祝你好运。

Answer 5

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

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

另外不要忘记设置最大值。

希望有所帮助。

如何在Highcharts中为轴设置最小上限？

5 个答案: