1. code：

    1.  <!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.      </script>
    183.  </head>
    184.  <body>
    185.      <form id="InfoForm" method='post'>
    186.       {% csrf_token %}
    187.          <input type='hidden' name="Info" value="{{data}}" id="postData" />
    188.      </form>
    189.      <div>
    190.          <table>
    191.              <tr>
    192.                  <td>规则：</td>
    193.                  <td>
    194.                      <select id="orderingBy" name="orderingBy">
    195.                          <option value="0" selected="selected">SourceIP</option>
    196.                          <option value="1">DestinationIP</option>
    197.                          <option value="2" >SourcePort</option>
    198.                          <option value="3">DestinationPort</option>
    199.                          <option value="4">Protocol</option>
    200.                      </select>
    201.                  </td>
    202.                  <td>时长：</td>
    203.                  <td>
    204.                      <select id="timeInterval" name="timeInterval">
    205.                          <option value="30" selected="selected">30分钟</option>
    206.                          <option value="60" >1小时</option>
    207.                          <option value="120">2小时</option>
    208.                          <option value="240">4小时</option>
    209.                          <option value="480">8小时</option>
    210.                      </select>
    211.                  </td>
    212.                  <td>
    213.                      <button id="updateRule" type="updateRule" title="submit" onclick="updateRule()" >
    214.                          <span class=""></span>
    215.                      </button>
    216.                  </td>
    217.              </tr>
    218.          </table>
    219.      </div>
    220.      <!--margin:设置外边框距离(CSS)-->
    221.      <div id="container" style="min-width:310px; height:350px; margin:0 auto"></div>
    222.  </body>
    223.  <html>

    addSeries

    说明：本HTML为显示主机流量统计，每次向后台获取信息后，讲总流量排名top n的主机流量显示在统计图中。因此在开始时不知道图中series的任何信息。需要在获取后台数据后再添加series数据。

  2. addSeries说明
    addSeries方法中第二个参数表示是否重绘图，false表示不刷新重绘，等所有的series添加完成后调用redraw()重绘
  3. 注意：
    想series的data：[]中插入数据时需要按照X轴正方向的排序方式排序后，再将数据插入[]中。否则会导致箭头停留在曲线图的节点上时，显示的是其他点的数据，造成页面提示信息错误。本例中由于获取到的数据在数组中为由大到小排列，而x轴正方向是由小到大。所以需要将获取的数据从后向前读取，并插入series中，以保证serise：[]中的数据是由小到大排列。

highchart 添加新的series的更多相关文章

  1. 【译】Meteor 新手教程：在排行榜上添加新特性

    原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...

  2. 【PostgreSQL】PostgreSQL添加新服务器连接时，报错“Server doesn't listen ”，已解决。

    PostgreSQL添加新的服务器连接时,报错:

  3. 一个新人如何学习在大型系统中添加新功能和Debug

    文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...

  4. ASP.NET MVC 5 - 给电影表和模型添加新字段

    在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...

  5. Linux 使用fdisk添加新分区

    Linux系统由于数据累计增长.前期存储规划不合理等诸多因素,出现存储不够用的情况时,此时就需要扩展逻辑分区或添加新的逻辑分区.下面介绍一下通过使用fdsik添加新的逻辑分区. 首先使用df命令检查文 ...

  6. [译]：Orchard入门——给网站添加新博客

    原文链接:Adding a Blog to Your Site 文章内容基于Orchard 1.8版本 Orchard提供一个博客引擎--这让添加一个新博客到你网站变得非常容易. 本文将介绍怎样添加一 ...

  7. 【tomcat ecplise】新下载一个tomcat,无法成功启动，或者启动了无法访问localhost:8080页面/ecplise无法添加新的tomcat/ecplise启动tomcat启动不起来

    今天转头使用ecplise,于是新下载一个tomcat7来作为服务器使用 但是问题来了: [问题1:全新的tomcat启动即消耗了不可思议的时间,并且启动了之前其他tomcat中的很多项目] [注意: ...

  8. vmware 虚拟机中添加新网卡无配置文件

    系统:centos 6/7 问题: 为虚拟机添加新网卡后,/etc/sysconfig/network-scripts/下无配置文件ifcfg-eth1 #ip addr      //显示存在eth ...

  9. Ecshop：后台添加新功能栏目以及管理权限设置

    一.添加菜单项 打开 /admin/includes/inc_menu.php文件(后台框架左边菜单),在最后添加一行如下: $modules['17_other_menu']['sns_list'] ...

随机推荐

  1. selenium web driver 实现截图功能

    在验证某些关键步骤时,需要截个图来记录一下当时的情况 Webdriver截图时,需要引入 import java.io.File; import java.io.IOException; import ...

  2. 「LeetCode」全部题解

    花了将近 20 多天的业余时间,把 LeetCode 上面的题目做完了,毕竟还是针对面试的题目,代码量都不是特别大,难度和 OJ 上面也差了一大截. 关于二叉树和链表方面考察变成基本功的题目特别多,其 ...

  3. UFLDL 教程三总结与答案

    主成分分析(PCA)是一种能够极大提升无监督特征学习速度的数据降维算法.更重要的是,理解PCA算法,对实现白化算法有很大的帮助,很多算法都先用白化算法作预处理步骤.这里以处理自然图像为例作解释. 1. ...

  4. oracle打补丁

    oracle 数据库补丁安装(单实例) ------------24006111 注:务必先安装24006111再安装24315821,否则无法进行正常的补丁安装流程.1.关闭数据库监听和数据库实例 ...

  5. 虚拟机出现“操作文件.PhysicalDrive1失败”的解决方法

    今天打算利用U盘给虚拟机装系统做实验,中途遇到了"操作文件.PhysicalDrive1失败"的错误,试了网上的方法都没有成功,最后自己试了很久总算弄出来了.鉴于本人的基础水平有限 ...

  6. Mac 下locate命令使用问题WARNING: The locate database (/var/db/locate.database) does not exist.

    想在Mac下使用locate时,提醒数据库没创建: WARNING: The locate database (/var/db/locate.database) does not exist. To ...

  7. 关于安装teamviewer11出现verification of your teamviewer version failed错误处理

    关于安装teamviewer11出现verification of your teamviewer version failed错误处理 teamviewer 在ubuntu 中安装方法是: 去tea ...

  8. 【DWR系列03】- DWR主要类详解

    img { border: 1px solid black } 一.简介 首先应该了解这个jar包主要的类,了解了类,就了解了DWR.DWR的在线javadoc:http://directwebrem ...

  9. 开源Unity小插件CheatConsole

    我们在开发游戏的过程中,通常都需要一些快捷的方式来进行一些非常规的测试,这些功能一般被称作控制台或者GM指令,比如虚幻竞技场中,可以使用~键呼出控制台,输入一些指令即可进行快捷设置,比如设置分辨率,全 ...

  10. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...