|
//引入的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="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);
}
});
}
|
