highcharts曲线图

在做项目时，用highcharts做过曲线图，X轴是从后台获取的时间数据，Y轴是从后台获取的Int型数据

1.我的后台数据封装成json格式，数据较多，展示部分数据

2.曲线图的展示

3.前端jsp页面代码

//引入的js

<!-- 曲线图 -->
<script src="<%=basePath%>Bootstrap/assets/js/highcharts/highcharts.js"></script>
<script src="<%=basePath%>Bootstrap/assets/js/highcharts/funnel.js"></script>
<script src="<%=basePath%>Bootstrap/assets/js/highcharts/highcharts-more.js"></script>

<div id="containerCall" style="width:80%;height:400px"></div>

var chart;

//呼叫量曲线图
Highcharts.setOptions( {
global : {
useUTC : false
}
});
pictureCall(0);                    //我这里需要传值，因为我有多个图表，不需要则不用传参

//呼叫量方法
function pictureCall(num){
var startStr= $("#search_graph_startDate").val()+" "+$("#search_graph_startTime").val();
var endStr= $("#search_graph_endDate").val()+" "+$("#search_graph_endTime").val();

optionsCall = {
chart : {
renderTo : 'containerCall',                       //此处为显示曲线图处的div的id
type : 'spline',
animation : Highcharts.svg,
marginRight : 10
},
plotOptions :{
cursor: 'pointer',
series: {
events:{
click:function(event){                        //点击曲线名隐藏，再点显示

}
}
}

},
credits: {
enabled: false                        //右下角不显示highcharts的graphO，为true则显示highcharts的图标
},
title : {
text : 'fs设备呼叫量显示图'
},
xAxis : {
type : 'datetime'
},
yAxis : {
title : {
text : ''
},
allowDecimals:false,
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
formatter : function() {
return '<b>'
+ this.series.name
+ '</b><br/>'
+ Highcharts.dateFormat(
'%Y-%m-%d %H:%M:%S', this.x)
+ '<br/>'
+ Highcharts.numberFormat(this.y, 2);
}
},
exporting : {
enabled : false
},
series:[]
},

$.ajax({
url : '<%=basePath%>resource/getDeviceSampleData.action',
type : 'POST',
dataType : 'json',
data:{
type:'call',
startTime:startStr,
endTime:endStr,
timeNum:num
},
success : function(result) {
$.each(result, function(index, element) {
var data1=new Array();
var timeAndValue =element.temp ;
for(var i=0;i<timeAndValue.length;i++){

//因为后台获取的时间，前端无法识别，所以要再次转换，若能识别，或者不是时间数据，此步骤可省略
var backTime = new Date(timeAndValue[i].time);
var preTime=backTime.getTime()-8*3600*1000;                     //UTC 输出为本地时间，会+8小时
var tt=new Date(preTime);

data1.push({
x: Date.UTC(tt.getFullYear(),tt.getMonth(),tt.getDate(),tt.getHours(),tt.getMinutes(),tt.getSeconds()),      
y: timeAndValue[i].tmpValue
});
}
optionsCall.series.push({"name": element.name, "data": data1});
});
chart = new Highcharts.Chart(optionsCall);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("error:"+textStatus);
}
});
}

官网highcharts曲线图地址:  http://v1.hcharts.cn/demo/index.php?p=10&theme=default