如果我創建的列圖的值大於0,但彼此的值比它們的值接近0,則生成的圖表將具有幾乎相同的列。看到這jsFiddle。計算高位圖中的最小y軸值
但是,如果我將圖表類型更改爲一行,則生成的圖表會更好,因爲min yAxis值計算爲非零值,因此圖表上值的分佈更加明顯。
我可以手動設置min yAxis值,但是我需要這個值來處理任何一組數據,所以需要計算它。我怎麼能爲柱形圖達到同樣的效果?
如果我創建的列圖的值大於0,但彼此的值比它們的值接近0,則生成的圖表將具有幾乎相同的列。看到這jsFiddle。計算高位圖中的最小y軸值
但是,如果我將圖表類型更改爲一行,則生成的圖表會更好,因爲min yAxis值計算爲非零值,因此圖表上值的分佈更加明顯。
我可以手動設置min yAxis值,但是我需要這個值來處理任何一組數據,所以需要計算它。我怎麼能爲柱形圖達到同樣的效果?
我發現Highcharts計算折線圖的最小值(至少對於線性軸)。它在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)
394.5創建蜱時是圓形的所以最終結果是390.
到目前爲止我想出的是this。 (yAxis上的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是here。