我似乎无法弄清楚如何正确设置刻度间隔。
需要在X轴上有5天时差的价格变动。我想显示x轴,例如“ 3月1日,3月5日,3月10日,3月15日”等
Fiddle Example
下面给出的Java脚本
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate from 2006 through 2008'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
tickInterval:24 * 3600 * 1000,
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2015, 2, 1),
data: [[140],[127],[35],[132],[192],[179],[131],[206],[92],[57],[352],[370],[281],[282],[128],[100],[33],[215],[154],[226],[225],[334],[105],[60],[264],[227],[151],[115],[184],[74]]
}]
});
});
</script>
谢谢
最佳答案
您可以随时使用tickPositioner
,演示:http://jsfiddle.net/96x5dz5c/2/
xAxis: {
type: 'datetime',
tickInterval:24 * 3600 * 1000 * 5,
tickPositioner: function(min, max){
var interval = this.options.tickInterval,
ticks = [],
count = 0;
while(min < max) {
ticks.push(min);
min += interval;
count ++;
}
ticks.info = {
unitName: 'day',
count: 5,
higherRanks: {},
totalRange: interval * count
}
return ticks;
}
},