在这个小提琴中：
http://jsfiddle.net/ot24zrkt/122/
y轴设置为：
max : 50,
min : 0
但是如何将最大y轴值设置为比当前最大Y轴值大10％。因此，小提琴上的最大y轴值为34，可以添加一个值为34 +（34的10％）的新点，而不是硬编码最大值应该是什么？
小提琴代码：
HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container2" style="width:500px;height:400px;margin:1.5em 1em;"></div>
<script>
var d = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
global: {
useUTC:false
},
colors: [
'rgba( 0, 154, 253, 0.9 )', //bright blue
'rgba( 253, 99, 0, 0.9 )', //bright orange
'rgba( 40, 40, 56, 0.9 )', //dark
'rgba( 253, 0, 154, 0.9 )', //bright pink
'rgba( 154, 253, 0, 0.9 )', //bright green
'rgba( 145, 44, 138, 0.9 )', //mid purple
'rgba( 45, 47, 238, 0.9 )', //mid blue
'rgba( 177, 69, 0, 0.9 )', //dark orange
'rgba( 140, 140, 156, 0.9 )', //mid
'rgba( 238, 46, 47, 0.9 )', //mid red
'rgba( 44, 145, 51, 0.9 )', //mid green
'rgba( 103, 16, 192, 0.9 )' //dark purple
],
chart: {
alignTicks:false,
type:'',
margin:[60,25,100,90],
//borderRadius:10,
//borderWidth:1,
//borderColor:'rgba(156,156,156,.25)',
//backgroundColor:'rgba(204,204,204,.25)',
//plotBackgroundColor:'rgba(255,255,255,1)',
style: {
fontFamily: 'Abel,serif'
}
},
title: {
text:'Test Chart Title',
align:'left',
margin:10,
x: 50,
style: {
fontWeight:'bold',
color:'rgba(0,0,0,.9)'
}
},
subtitle: {
text:'Test Chart Subtitle',
align:'left',
x: 52,
},
legend: { enabled: true },
plotOptions: {
area: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
arearange: {
lineWidth:1
},
areaspline: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
areasplinerange: {
lineWidth:1
},
boxplot: {
groupPadding:0.05,
pointPadding:0.05,
fillColor:'rgba(255,255,255,.75)'
},
bubble: {
minSize:'0.25%',
maxSize:'17%'
},
column: {
//stacking:'normal',
groupPadding:0.05,
pointPadding:0.05
},
columnrange: {
groupPadding:0.05,
pointPadding:0.05
},
errorbar: {
groupPadding:0.05,
pointPadding:0.05,
showInLegend:true
},
line: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
scatter: {
marker: {
symbol: 'circle',
radius:5
}
},
spline: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
series: {
shadow: false,
borderWidth:0,
states: {
hover: {
lineWidthPlus:0,
}
}
}
},
xAxis: {
title: {
text: 'X Axis Title',
rotation:0,
textAlign:'center',
style:{
color:'rgba(0,0,0,.9)'
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Y Axis<br/>Title',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
</script>
CSS :
@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
font-family:Abel, Calibri, Helvetica, sans-serif;
font-size:95%;
}
JavaScript :
var chart;
var pointStart = Date.UTC(2014,0,1);
$(function() {
$('#container2').highcharts({
chart : { type : 'line' },
title : { },
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000*30
}
},
xAxis : {
min:Date.UTC(2014, 0, 0),
max:Date.UTC(2014, 11, 1),
//allowDecimals: false,
type : 'datetime',
tickInterval : 24 * 3600 * 1000*30, //one day
labels : {
rotation : 0
},
},
yAxis : {
max : 50,
min : 0
}
});
chart = $('#container2').highcharts();
var jsonString = '[ { "date": "2014-1-01", "in": "30", "out": "21" }, { "date": "2014-1-02", "in": "35", "out": "32" }, { "date": "2014-1-03", "in": "23", "out": "34" }, { "date": "2014-1-04", "in": "20", "out": "15" }, { "date": "2014-1-05", "in": "34", "out": "20" }, { "date": "2014-2-06", "in": "22", "out": "34" }, { "date": "2014-2-07", "in": "15", "out": "18" } ]';
var myData = JSON.parse(jsonString);
var dataArray = []
$.each(myData, function(i, obj) {
console.log(obj.date)
var d = new Date(obj.date)
dataArray.push([Date.parse(d), parseInt(obj.in)])
});
chart.addSeries({
data: dataArray
});
console.log('data is '+dataArray)
})
答案 0 :(得分：1)
考虑以下事项：
var temp=[]
var height=0;
$.each(myData, function(i, obj) {
console.log(obj.date)
var d = new Date(obj.date)
dataArray.push([Date.parse(d), parseInt(obj.in)])
temp.push(parseInt(obj.in))
});
height=Math.max.apply(Math, temp);
height=height/10+height;
//alert(height);
在图表中：
yAxis : {
max : height,
min : 0
}
小提琴here
希望这就是你要找的东西
答案 1 :(得分：0)
确定$.each()方法中的最大值。
然后在第一个（也是唯一的）yAxis：
上调用setExtremes()
var maxy= 0;
$.each(myData, function(i, obj) {
var d = new Date(obj.date)
dataArray.push([Date.parse(d), parseInt(obj.in)])
maxy= Math.max(maxy, obj.in);
});
chart.yAxis[0].setExtremes(0, maxy*1.10);
答案 2 :(得分：0)
您可以使用tickPositioner，它允许返回自定义刻度位置。
tickPositioner: function(min, max) {
var positions = [1,2,3],
maxPercent = max + 0.1 * max,
tick = 0,
increment = Math.ceil(maxPercent / 6) ;
for (tick; tick <= max; tick += increment) {
positions.push(tick);
}
positions.push(maxPercent);
return positions;
}