用highcharts.js制作的图表,x轴是时间格式(yyyy-mm-dd hh:mm:ss),数据是从后台传到jsp页面中的(已拼成json格式[{data:[[2012-01-01 09:09:09,0.12],[2012-01-02 09:09:28,0.32]}]),但现在x轴刻度是等距的,而且是固定的,我想让x轴的刻度根据传来的数据动态变化,即是不等距的,传来什么数据就在x轴上显示什么刻度,请问大家如何实现,谢谢了!
?
option={
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'HeartBeat Chart'
},
xAxis: {
type: 'datetime',
// maxPadding : 0.05,
// minPadding : 0.05,
// tickInterval : 360,
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%b-%e %H:%M:%S', this.value);
}
},
title: {
align: 'high',
text: 'Now'
},
tickmarkPlacement: 'between',
tickPixelInterval: 154
// tickWidth:2000
},
yAxis: {
// maxPadding : 0.05,
// minPadding : 0.05,
title: {
align: 'high',
text: 'Total Lag(s)'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var xAxis=this.x;
for(var i=0;i<10;i++)
{
var u=option.series[0].data[i][0];
if(xAxis==u){
$("#lag"+xAxis).show();
break;
}else{
$("#lag"+u).hide();
}
}
}
}
}
}
},
tooltip: {
crosshairs: [true],
useHTML: true,
formatter: function() {
return 'The value for <b>'+ this.x +
'</b> is <b>'+ this.y +'</b>';
},
valueDecimals: 2
},
series: []
};
var a=$("#dataPoint").val();
var splitdata=$("#splitdata").val();//从后台传来的数据
handleJsonDateData(a,splitdata);
});
//对json数据的处理函数
function handleJsonDateData(data,splitdata){
if(data.indexOf("{")<0)
return false;
else{
var array= eval ("("+data+")");
var splitarray= eval ("("+splitdata+")");
for(var i=0;i<splitarray.length;i++){
var avb=splitarray[i][0];
var date=Date.UTC(splitarray[i][0],splitarray[i][1],splitarray[i][2],splitarray[i][3],splitarray[i][4],splitarray[i][5]);
array[0].data[i].unshift(date);
}
for(var j=0;j<array.length;j++){
option.series.push(array[j]);
}
chart=new Highcharts.Chart(option);
}
}
在series里面修改你的data源数据格式即下面data:2所示。http://www.highcharts.com/ref/#series--data,也可参照此例http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/type-datetime-irregular/即
xAxis的type属性。
data : Array<Mixed>
An array of data points for the series. The points can be given in three ways:
A list of numerical values. In this case, the numberical values will be interpreted and y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. Example:
data: [0, 5, 3, 5]
A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:
data: [[5, 2], [6, 3], [8, 2]]
A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
Defaults to "".
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。