如果我创建具有是> 0,但在值更接近彼此比它们与0值柱形图然后生成的图表将具有看起来几乎相同的列。 看到这个的jsfiddle 。
然而,如果我更改图表类型的线则由于Y轴分钟值被计算为一个非零值,以便在图表上的值的分布更加明显所得图表是好得多。
我可以手动设定最低值,Y轴,但我需要这对任何数据集的工作,所以需要计算。 我怎么能实现柱形图是一回事吗?
如果我创建具有是> 0,但在值更接近彼此比它们与0值柱形图然后生成的图表将具有看起来几乎相同的列。 看到这个的jsfiddle 。
然而,如果我更改图表类型的线则由于Y轴分钟值被计算为一个非零值,以便在图表上的值的分布更加明显所得图表是好得多。
我可以手动设定最低值,Y轴,但我需要这对任何数据集的工作,所以需要计算。 我怎么能实现柱形图是一回事吗?
我发现其中Highcharts计算线图min值(至少对于线性轴)。 它在getTickPositions()函数。 具体地,这些行代码:
// pad the values to get clear of the chart's edges
if (!categories && !usePercentage && !isLinked && defined(min) && defined(max)) {
length = (max - min) || 1;
if (!defined(options.min) && !defined(userMin) && minPadding && (dataMin < 0 || !ignoreMinPadding)) {
min -= length * minPadding;
}
if (!defined(options.max) && !defined(userMax) && maxPadding && (dataMax > 0 || !ignoreMaxPadding)) {
max += length * maxPadding;
}
}
所以,它计算的最小
length = ([max data value] - [min data value]) || 1
min = [min data value] - length * minPadding
在Y轴的minPadding默认值是0.05,从而
394.5 = 395 - ((405 - 395) * 0.05)
创建刻度位置时,从而最终的结果是390 394.5是圆形的。
我想出来的,到目前为止是这样 。 (在Y轴的minPadding默认似乎并没有暴露,所以我已经硬编码它)
var data = [400,405,395];
Array.max = function( array ){
return Math.max.apply( Math, array );
};
Array.min = function( array ){
return Math.min.apply( Math, array );
};
var min = Array.min(data);
var max = Array.max(data);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
yAxis: {
min: min - ((max-min) * 0.05)
},
series: [{
data: data
}]
});
尝试将Y轴的值,例如:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
yAxis: {
min: 390,
startOnTick: false
},
series: [{
data: [400,405,395]
}]
});
您还可以将其设置为在javascript某种动态值(AVG(400,405,395) - 10%,例如)应该给它足够的规模。
更新的jsfiddle是在这里 。