在做项目时，用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