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

Question

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

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

似乎是 Highcharts 所做的事情，但我似乎不知道如何做。有人有这方面的经验吗？

Answer 1

Highcharts 似乎没有在图表创建时执行此操作的选项。但是，它们确实公开了一些方法来询问极值并更改极值，getExtremes() 和 setExtremes(Number min, Number max, [Boolean redraw], [Mixedanimation])< /code> 在他们的文档中找到。

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

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 相同的结果。请参阅此 JSFiddle 演示。

Answer 3

添加到 Julian D 的非常好的答案，如果您计算的最大值的位数与您想要的上限不同，以下内容可以避免潜在的重新定位问题。

就我而言，我的百分比数据当前进入 20 年代，但我想要的范围是 0 到至少 100，如果需要，有可能超过 100，因此以下设置 min & max ，然后如果 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...
});

Answer 4

HigtCharts 有一个非常好的所有方法的文档和示例。

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

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

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

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

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

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

，

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

祝你好运。

Answer 5

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

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

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

希望有帮助。