- code：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流量统计</title>
<script type="text/javascript" src="/ads/static/js/jquery-1.7.1.min.js"></script>
<!--script type="text/javascript" src="./statics/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./statics/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="./statics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src='./statics/js/jquery.custom.js' type="text/javascript"></script>
<script type="text/javascript" src='./statics/js/jquery.cookie.js' type="text/javascript"></script>
<script type="text/javascript" src='./statics/js/jquery.dynatree.js' type="text/javascript"></script>
<script type="text/javascript" src="./statics/js/ajaxProgressUpload.js"></script>
<script type="text/javascript" src='/statics/js/uploadfile.js' type="text/javascript"></script>
<script type="text/javascript" src='/statics/js/jquery.pagination.js' type="text/javascript"></script-->
<script type="text/javascript" src="/ads/static/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/ads/static/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="/ads/static/highcharts/modules/exporting.js"></script>
<script type="text/javascript">
var g_submitInfo = null;
var g_TrafficChart = null;
$(function (){
g_submitInfo = null;
g_TrafficChart = null; $(document).ready(function()
{
Highcharts.setOptions({
global:{
useUTC: false
}
});
g_TrafficChart = new Highcharts.Chart({
chart: {
renderTo: 'container',//renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的DIV元素
type: 'line',
animation: Highcharts.svg,
//marginRight: 10,
events: {
load: function() {
}
}
},
title:{
text:'设备流量统计图'
},
xAxis:{
type: 'datetime',
//dateTimeLabelFormats: {
// minute: '%H:%M'
//},
tickPixelInterval: 120
},
yAxis:{
title:{
text: 'bps',
style: {
color: '#3E576F'
}
}
},
exporting: { //说明：导出及打印选项,打印导出功能的配置项
enabled: false
},
tooltip:{
//valueSuffix: 'Mbps',
formatter: function(){
return ''+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ this.series.name + ':' + Highcharts.numberFormat(this.y, 2) + 'bps';
}
},
legend:{ //图例框参数配置项的使用
layout: 'vertical', //图例的布局方式。可选项为"horizontal"(水平) 或者 "vertical"(垂直)
align: 'right', //图例的水平对齐方式，可选项为"right"、"center"和"left"
verticalAlign: 'middle',//图例的垂直对齐方式。可选项为"top", "middle" 或者 "bottom"
borderWidth: 0 //图例的边框宽度。
},
credits: {
enabled: false
}
});
g_TrafficChart.addSeries({
id:2,
name: "beijing",
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i; for (i = -14; i <= 0; i++) {
data.push({
x: time + i * 1000*60*5,
y: Math.random()*10
});
}
return data;
})()
},false);
g_TrafficChart.redraw();
submitInfo();
}); }); function ajaxobj(_url, _tag, _way, _form)
{
var m = (typeof(_way) == "undefined" ? "GET" :_way );
var par = (typeof(_form) == "undefined" ? "" :$(_form).serialize());
var info = "";
$.ajax({
type:m,
url:_url,
data:par,
async: false,
error: function(request) {
//alert("Connection error");
},
success: function(data) {
//$(_tag).html(data);
//alert(data);
info = data;
}
});
return info;
} function postInfo()
{
var order = -1;
var interval = -1;
var startTime = null;
var endTime = null;
} function getSubmitInfo()
{
g_submitInfo = new postInfo();
g_submitInfo. order = $("#orderingBy")[0].value;
g_submitInfo. interval = $("#timeInterval")[0].value;
} function updateTrafficChart(json)
{
if(json.length == 0) return false; for(var i = 0; i<json.length; i++)
{
traffic = json[i];
host = traffic.ip;
g_TrafficChart.addSeries({
id:1,
name: host,
data: (function(){
var data = [];
var node = traffic.data;
for(var j = node.length-1; j >= 0; j--)
{
xValue = new Date(node[j].time);
yValue = parseFloat(node[j].bps);
data.push({
x: xValue,
y: yValue
});
}
return data;
})()
},false);
}
g_TrafficChart.redraw();
} function submitInfo()
{
getSubmitInfo();
$("#postData").attr("value", JSON.stringify(g_submitInfo));
result = ajaxobj("/statistical/getTraffic/", "", "post", "#InfoForm");
alert(result);
var json = $.parseJSON(result);
updateTrafficChart(json);
} </script>
</head>
<body>
<form id="InfoForm" method='post'>
{% csrf_token %}
<input type='hidden' name="Info" value="{{data}}" id="postData" />
</form>
<div>
<table>
<tr>
<td>规则：</td>
<td>
<select id="orderingBy" name="orderingBy">
<option value="0" selected="selected">SourceIP</option>
<option value="1">DestinationIP</option>
<option value="2" >SourcePort</option>
<option value="3">DestinationPort</option>
<option value="4">Protocol</option>
</select>
</td>
<td>时长：</td>
<td>
<select id="timeInterval" name="timeInterval">
<option value="30" selected="selected">30分钟</option>
<option value="60" >1小时</option>
<option value="120">2小时</option>
<option value="240">4小时</option>
<option value="480">8小时</option>
</select>
</td>
<td>
<button id="updateRule" type="updateRule" title="submit" onclick="updateRule()" >
<span class=""></span>
</button>
</td>
</tr>
</table>
</div>
<!--margin:设置外边框距离(CSS)-->
<div id="container" style="min-width:310px; height:350px; margin:0 auto"></div>
</body>
<html>addSeries
说明：本HTML为显示主机流量统计，每次向后台获取信息后，讲总流量排名top n的主机流量显示在统计图中。因此在开始时不知道图中series的任何信息。需要在获取后台数据后再添加series数据。
- addSeries说明
addSeries方法中第二个参数表示是否重绘图，false表示不刷新重绘，等所有的series添加完成后调用redraw()重绘 - 注意：
想series的data：[]中插入数据时需要按照X轴正方向的排序方式排序后，再将数据插入[]中。否则会导致箭头停留在曲线图的节点上时，显示的是其他点的数据，造成页面提示信息错误。本例中由于获取到的数据在数组中为由大到小排列，而x轴正方向是由小到大。所以需要将获取的数据从后向前读取，并插入series中，以保证serise：[]中的数据是由小到大排列。
相关文章
- 02-05mongoose+koa2 按照_id更新多条数据，删除数组中的字段，然后添加新的字段，$pull和$or结合使用
- 02-05子类继承之后添加新的属性出现报错及解决方法
- 02-05sublime添加新的扩展工具及快捷键的对于关系
- 02-05如何给表添加新的字段
- 02-05DOM给表格添加新一行和删除整个行的内容
- 02-05向Android添加新的编解码器？
- 02-05使用Pandas添加列的时候，出现空值（原因是列的格式是Series）
- 02-05实际效果：点击添加按钮添加新的一行，在行内可对数据进行编辑和删除
- 02-05添加一个新的系统
- 02-05这也能用Jenkins？快速实现一个定期批量登录远程虚拟机并支持添加新的主机名称的Job