- code：
addSeries1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>流量统计</title> 6 <script type="text/javascript" src="/ads/static/js/jquery-1.7.1.min.js"></script> 7 <!--script type="text/javascript" src="./statics/js/bootstrap.min.js"></script> 8 <script type="text/javascript" src="./statics/js/bootstrap-datetimepicker.js"></script> 9 <script type="text/javascript" src="./statics/js/bootstrap-datetimepicker.zh-CN.js"></script> 10 <script type="text/javascript" src='./statics/js/jquery.custom.js' type="text/javascript"></script> 11 <script type="text/javascript" src='./statics/js/jquery.cookie.js' type="text/javascript"></script> 12 <script type="text/javascript" src='./statics/js/jquery.dynatree.js' type="text/javascript"></script> 13 <script type="text/javascript" src="./statics/js/ajaxProgressUpload.js"></script> 14 <script type="text/javascript" src='/statics/js/uploadfile.js' type="text/javascript"></script> 15 <script type="text/javascript" src='/statics/js/jquery.pagination.js' type="text/javascript"></script--> 16 <script type="text/javascript" src="/ads/static/highcharts/highcharts.js"></script> 17 <script type="text/javascript" src="/ads/static/highcharts/highcharts-3d.js"></script> 18 <script type="text/javascript" src="/ads/static/highcharts/modules/exporting.js"></script> 19 <script type="text/javascript"> 20 var g_submitInfo = null; 21 var g_TrafficChart = null; 22 $(function (){ 23 g_submitInfo = null; 24 g_TrafficChart = null; 25 26 $(document).ready(function() 27 { 28 Highcharts.setOptions({ 29 global:{ 30 useUTC: false 31 } 32 }); 33 g_TrafficChart = new Highcharts.Chart({ 34 chart: { 35 renderTo: 'container',//renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的DIV元素 36 type: 'line', 37 animation: Highcharts.svg, 38 //marginRight: 10, 39 events: { 40 load: function() { 41 } 42 } 43 }, 44 title:{ 45 text:'设备流量统计图' 46 }, 47 xAxis:{ 48 type: 'datetime', 49 //dateTimeLabelFormats: { 50 // minute: '%H:%M' 51 //}, 52 tickPixelInterval: 120 53 }, 54 yAxis:{ 55 title:{ 56 text: 'bps', 57 style: { 58 color: '#3E576F' 59 } 60 } 61 }, 62 exporting: { //说明：导出及打印选项,打印导出功能的配置项 63 enabled: false 64 }, 65 tooltip:{ 66 //valueSuffix: 'Mbps', 67 formatter: function(){ 68 return ''+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ this.series.name + ':' + Highcharts.numberFormat(this.y, 2) + 'bps'; 69 } 70 }, 71 legend:{ //图例框参数配置项的使用 72 layout: 'vertical', //图例的布局方式。可选项为"horizontal"(水平) 或者 "vertical"(垂直) 73 align: 'right', //图例的水平对齐方式，可选项为"right"、"center"和"left" 74 verticalAlign: 'middle',//图例的垂直对齐方式。可选项为"top", "middle" 或者 "bottom" 75 borderWidth: 0 //图例的边框宽度。 76 }, 77 credits: { 78 enabled: false 79 } 80 }); 81 g_TrafficChart.addSeries({ 82 id:2, 83 name: "beijing", 84 data: (function() { 85 // generate an array of random data 86 var data = [], 87 time = (new Date()).getTime(), 88 i; 89 90 for (i = -14; i <= 0; i++) { 91 data.push({ 92 x: time + i * 1000*60*5, 93 y: Math.random()*10 94 }); 95 } 96 return data; 97 })() 98 },false); 99 g_TrafficChart.redraw(); 100 submitInfo(); 101 }); 102 103 }); 104 105 function ajaxobj(_url, _tag, _way, _form) 106 { 107 var m = (typeof(_way) == "undefined" ? "GET" :_way ); 108 var par = (typeof(_form) == "undefined" ? "" :$(_form).serialize()); 109 var info = ""; 110 $.ajax({ 111 type:m, 112 url:_url, 113 data:par, 114 async: false, 115 error: function(request) { 116 //alert("Connection error"); 117 }, 118 success: function(data) { 119 //$(_tag).html(data); 120 //alert(data); 121 info = data; 122 } 123 }); 124 return info; 125 } 126 127 function postInfo() 128 { 129 var order = -1; 130 var interval = -1; 131 var startTime = null; 132 var endTime = null; 133 } 134 135 function getSubmitInfo() 136 { 137 g_submitInfo = new postInfo(); 138 g_submitInfo. order = $("#orderingBy")[0].value; 139 g_submitInfo. interval = $("#timeInterval")[0].value; 140 } 141 142 function updateTrafficChart(json) 143 { 144 if(json.length == 0) return false; 145 146 for(var i = 0; i<json.length; i++) 147 { 148 traffic = json[i]; 149 host = traffic.ip; 150 g_TrafficChart.addSeries({ 151 id:1, 152 name: host, 153 data: (function(){ 154 var data = []; 155 var node = traffic.data; 156 for(var j = node.length-1; j >= 0; j--) 157 { 158 xValue = new Date(node[j].time); 159 yValue = parseFloat(node[j].bps); 160 data.push({ 161 x: xValue, 162 y: yValue 163 }); 164 } 165 return data; 166 })() 167 },false); 168 } 169 g_TrafficChart.redraw(); 170 } 171 172 function submitInfo() 173 { 174 getSubmitInfo(); 175 $("#postData").attr("value", JSON.stringify(g_submitInfo)); 176 result = ajaxobj("/statistical/getTraffic/", "", "post", "#InfoForm"); 177 alert(result); 178 var json = $.parseJSON(result); 179 updateTrafficChart(json); 180 } 181 182 183 </script> 184 </head> 185 <body> 186 <form id="InfoForm" method='post'> 187 {% csrf_token %} 188 <input type='hidden' name="Info" value="{{data}}" id="postData" /> 189 </form> 190 <div> 191 <table> 192 <tr> 193 <td>规则：</td> 194 <td> 195 <select id="orderingBy" name="orderingBy"> 196 <option value="0" selected="selected">SourceIP</option> 197 <option value="1">DestinationIP</option> 198 <option value="2" >SourcePort</option> 199 <option value="3">DestinationPort</option> 200 <option value="4">Protocol</option> 201 </select> 202 </td> 203 <td>时长：</td> 204 <td> 205 <select id="timeInterval" name="timeInterval"> 206 <option value="30" selected="selected">30分钟</option> 207 <option value="60" >1小时</option> 208 <option value="120">2小时</option> 209 <option value="240">4小时</option> 210 <option value="480">8小时</option> 211 </select> 212 </td> 213 <td> 214 <button id="updateRule" type="updateRule" title="submit" onclick="updateRule()" > 215 <span class=""></span> 216 </button> 217 </td> 218 </tr> 219 </table> 220 </div> 221 <!--margin:设置外边框距离(CSS)--> 222 <div id="container" style="min-width:310px; height:350px; margin:0 auto"></div> 223 </body> 224 <html>
说明：本HTML为显示主机流量统计，每次向后台获取信息后，讲总流量排名top n的主机流量显示在统计图中。因此在开始时不知道图中series的任何信息。需要在获取后台数据后再添加series数据。
- addSeries说明
addSeries方法中第二个参数表示是否重绘图，false表示不刷新重绘，等所有的series添加完成后调用redraw()重绘 - 注意：
想series的data：[]中插入数据时需要按照X轴正方向的排序方式排序后，再将数据插入[]中。否则会导致箭头停留在曲线图的节点上时，显示的是其他点的数据，造成页面提示信息错误。本例中由于获取到的数据在数组中为由大到小排列，而x轴正方向是由小到大。所以需要将获取的数据从后向前读取，并插入series中，以保证serise：[]中的数据是由小到大排列。
