highchart 添加新的series
- 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：[]中的数据是由小到大排列。
highchart 添加新的series的更多相关文章
- 【译】Meteor 新手教程：在排行榜上添加新特性
原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...
- 【PostgreSQL】PostgreSQL添加新服务器连接时，报错“Server doesn't listen ”，已解决。
PostgreSQL添加新的服务器连接时,报错:
- 一个新人如何学习在大型系统中添加新功能和Debug
文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...
- ASP.NET MVC 5 - 给电影表和模型添加新字段
在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...
- Linux 使用fdisk添加新分区
Linux系统由于数据累计增长.前期存储规划不合理等诸多因素,出现存储不够用的情况时,此时就需要扩展逻辑分区或添加新的逻辑分区.下面介绍一下通过使用fdsik添加新的逻辑分区. 首先使用df命令检查文 ...
- [译]：Orchard入门——给网站添加新博客
原文链接:Adding a Blog to Your Site 文章内容基于Orchard 1.8版本 Orchard提供一个博客引擎--这让添加一个新博客到你网站变得非常容易. 本文将介绍怎样添加一 ...
- 【tomcat ecplise】新下载一个tomcat,无法成功启动，或者启动了无法访问localhost:8080页面/ecplise无法添加新的tomcat/ecplise启动tomcat启动不起来
今天转头使用ecplise,于是新下载一个tomcat7来作为服务器使用 但是问题来了: [问题1:全新的tomcat启动即消耗了不可思议的时间,并且启动了之前其他tomcat中的很多项目] [注意: ...
- vmware 虚拟机中添加新网卡无配置文件
系统:centos 6/7 问题: 为虚拟机添加新网卡后,/etc/sysconfig/network-scripts/下无配置文件ifcfg-eth1 #ip addr //显示存在eth ...
- Ecshop：后台添加新功能栏目以及管理权限设置
一.添加菜单项 打开 /admin/includes/inc_menu.php文件(后台框架左边菜单),在最后添加一行如下: $modules['17_other_menu']['sns_list'] ...
随机推荐
- Python之路,Day7 - Python基础7 面向对象
本节内容: 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法. 引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战> ...
- strsep和strtok_r替代strtok
char *strtok(char *str, const char *delim) 会修改数据源.外部加锁才线程安全(strtok执行结束再解锁执行另一个strtok循环知道工作完成) 主要是以互斥 ...
- gulp整理
gulp基于node 1.全局安装gulp: $ npm install --global gulp 2.前往项目目录,然后安装作为项目的开发依赖(devDependencies): $ npm in ...
- 【Django】--ModelForm组件
ModelForm a.class Meta: model,#对应Model的 fields=None,#字段 exclude=None,#排除字段 labels=None,#提示信息 help_te ...
- 土地购买（bzoj 1597）
Description 农夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块土地的长宽满足(1 <= 宽 <= 1,000, ...
- ubantu16.04+mxnet +opencv+cuda8.0 环境搭建
ubantu16.04+mxnet +opencv+cuda8.0 环境搭建 建议:环境搭建完成之后,不要更新系统(内核) 转载请注明出处: 微微苏荷 一 我的安装环境 系统:ubuntu16.04 ...
- POJ 2991–Crane【线段树+几何】
题意: 把手臂都各自看成一个向量,则机械手的位置正好是手臂向量之和.旋转某个关节,其实就是把关节到机械手之间的手臂向量统统旋转. 由于手臂很多,要每个向量做相同的旋转操作很费时间.这时就可以想到用线段 ...
- Kinect开发随笔①——红外扫描仪（Kinect 数据源）
来源于 MVA 的 快速入门:Kinect for Windows v2 开发 的学习随笔 具体内容为上图所示章节内容 章节内全部代码:GitHub地址点我(链接失效,待补档) <Page &l ...
- oracle函数简析
(一).数值型函数(Number Functions) 数值型函数输入数字型参数并返回数值型的值.多数该类函数的返回值支持38位小数点,诸如:COS, COSH, EXP, LN, LOG, SIN, ...
- unicode 和 utf8
关于 unicode utf8 文章来自于 http://blog.csdn.net/tge7618291/article/details/7599902 ascii 主要来表示英文.但是要全世界那么 ...