javascript 如何在 Highcharts 中为轴设置最小上限？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9202186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set a minimum upper bound for an axis in Highcharts?
提问by Andrew Dunkman
I'm trying to set a minimum upper bound, specifically:
我正在尝试设置一个最小上限，特别是：
- The Y axis should start at 0
- The Y axis should go to at least 10, or higher (automatically scale)
- The upper bound for the Y axis should never be less than 10.
- Y 轴应该从 0 开始
- Y 轴应至少为 10 或更高（自动缩放）
- Y 轴的上限不应小于 10。
Seems like something Highcharts does, but I can't seem to figure out how. Anybody have experience with this?
看起来像 Highcharts 所做的事情，但我似乎无法弄清楚如何。有人有这方面的经验吗？
回答by smerchek
Highcharts doesn't seem to have an option for doing this at chart creation time. However, they do expose a couple methods to interrogate the extremes and change the extremes, getExtremes()and setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation])found in their documentation.
Highcharts 似乎没有在图表创建时执行此操作的选项。然而，他们确实公开了一些方法来询问极端情况并改变极端情况，getExtremes()并setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation])在他们的文档中找到。
So, a possible solution (after chart creation):
因此，一个可能的解决方案（在图表创建之后）：
if (chart.yAxis[0].getExtremes().dataMax < 10) {
chart.yAxis[0].setExtremes(0, 10);
}
yAxis[0]references the first y-axis, and I'm assuming that you only have one axis in this case. The docexplains how to access other axes.
yAxis[0]引用第一个 y 轴，我假设在这种情况下您只有一个轴。该文档解释了如何访问其他轴。
This isn't ideal, because the chart has to redraw which isn't too noticeable, but it's still there. Hopefully, Highcharts could get this sort of functionality built in to the options.
这并不理想，因为图表必须重新绘制，这不太明显，但它仍然存在。希望 Highcharts 可以将这种功能内置到选项中。
回答by Halvor Holsten Strand
A way to do this only using options (no events or functions) is:
仅使用选项（无事件或函数）执行此操作的方法是：
yAxis: {
min: 0,
minRange: 10,
maxPadding: 0
}
Here minRangedefines the minimum span of the axis. maxPaddingdefaults to 0.01 which would make the axis longer than 10, so we set it to zero instead.
这里minRange定义了轴的最小跨度。maxPadding默认为 0.01，这会使轴长于 10，因此我们将其设置为零。
This yields the same results as a setExtremewould give. See this JSFiddle demonstration.
这会产生与 asetExtreme给出的结果相同的结果。请参阅此 JSFiddle 演示。
回答by David Bell
Adding to Julian D's very good answer, the following avoids a potential re-positioning problem if your calculated max varies in number of digits to your desired upper bound.
添加到Julian D 的非常好的答案中，如果您计算的最大值在位数上变化到您想要的上限，则以下内容可避免潜在的重新定位问题。
In my case I had percentage data currently going into the 20's but I wanted a range of 0 to at least 100, with the possibility to go over 100 if required, so the following sets min & max in the code, then if dataMax turns out to be higher, reassigns max up to it's value. This means the graph positioning is always calculated with enough room for 3-digit values, rather than calculated for 2-digits then broken by squeezing "100" in, but allows up to "999" before there would next be a problem.
在我的情况下，我的百分比数据目前进入 20 年代，但我想要一个范围为 0 到至少 100，如果需要，可能会超过 100，因此以下在代码中设置 min 和 max，然后如果 dataMax 出现要更高，重新分配最大值直到它的值。这意味着图形定位总是在计算 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...
});
回答by gotqn
HigtCharts has a really good documentation of all methods with examples.
HigtCharts 有一个非常好的文档，包含所有方法和示例。
http://www.highcharts.com/ref/#yAxis--min
http://www.highcharts.com/ref/#yAxis--min
In your case I think you should the "min" and "max" properties of "yAxis".
在您的情况下，我认为您应该使用“yAxis”的“min”和“max”属性。
min : Number The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down. Defaults to null.
max : Number The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. Defaults to null.
min : Number 轴的最小值。如果为 null，则自动计算最小值。如果 startOnTick 选项为真，则最小值可能会向下舍入。默认为空。
max : Number 轴的最大值。如果为空，则自动计算最大值。如果 endOnTick 选项为真，则最大值可能会四舍五入。实际最大值也受 chart.alignTicks 的影响。默认为空。
If you are creating your chart dynamically you should set
如果您要动态创建图表，则应设置
min=0 max=10 , if your all data values are less then 10
min=0 max=10 ，如果您的所有数据值都小于 10
and
和
only min=0, if you have value greater then 10
只有 min=0，如果您的值大于 10
Good luck.
祝你好运。
回答by marknatividad
Try setting the minimum value of the axis and the interval of the tick marks in axis units like so:
尝试以轴为单位设置轴的最小值和刻度线的间隔，如下所示：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
yAxis: {
min: 0,
max: 10,
tickInterval: 10
}
});
Also don't forget to set the max value.
也不要忘记设置最大值。
Hope that helps.
希望有帮助。
