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