highchart 添加新的series

最新推荐文章于 2022-06-30 14:45:50 发布

weixin_34185320

最新推荐文章于 2022-06-30 14:45:50 发布

阅读量142

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/yunsicai/p/3988843.html

版权

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 
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>

addSeries

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

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

转载于:https://www.cnblogs.com/yunsicai/p/3988843.html

weixin_34185320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highchart 添加新的series

code： 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>流量统计</title>...
复制链接

扫一扫