jquery结合highcharts插件显示实时数据动态曲线图

原创 2016年05月30日 13:23:38

效果如图所示:


js代码如下:

复制代码
  1 $(document).ready(function() {
  2     Highcharts.setOptions({
  3             global: {
  4                 useUTC: false
  5             },
  6             colors:"#08c,#ff5a00".split(","),
  7             symbols: ["circle","triangle"]
  8         });
  9   
 10         var options = {
 11             chart: {
 12                 renderTo: 'container',
 13                 type: 'spline',
 14                 marginRight: 10,
 15                 events: {
 16                     load: function() {
 17                         // set up the updating of the chart each second
 18                         // var series = this.series[0];
 19                         $.each(this.series, function(idx, series) {
 20                             setInterval(function() {
 21                                 var x = (new Date()).getTime(), // current time
 22                                     y = Math.random();
 23                                 series.addPoint([x, y], true, true);
 24                             }, 1000);
 25                         });
 26                     }
 27                 }
 28             },
 29             title: {
 30                 text: '实时宽带'
 31             },
 32             subtitle: {
 33                 text: " "
 34             },
 35             credits: {
 36                 enabled: false
 37             },
 38             xAxis: {
 39                 type: 'datetime',
 40                 tickPixelInterval: 80
 41             },
 42             yAxis: {
 43                 title: {
 44                     text: 'Kbps'
 45                 },
 46                 startOnTick: true, //为true时,设置min才有效
 47                 min: 0,
 48                 plotLines: [{
 49                     value: 0,
 50                     width: 1,
 51                     color: '#808080'
 52                 }]
 53             },
 54             tooltip: {
 55                 formatter: function() {
 56                     return '<b>' + this.series.name + '</b><br/>' +
 57                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
 58                         Highcharts.numberFormat(this.y, 2) + ' Kbps' + '</span>';
 59   
 60                 }
 61             },
 62             legend: {
 63                 enabled: true
 64             },
 65             exporting: {
 66                 enabled: false
 67             },
 68             series: [{
 69                 name: '实时下载速率',
 70                 data: (function() {
 71                     // generate an array of random data
 72                     var data = [],
 73                         time = (new Date()).getTime(),
 74                         i;
 75   
 76                     for (i = -19; i <= 0; i++) {
 77                         data.push({
 78                             x: time + i * 1000,
 79                             y: Math.random()
 80                         });
 81                     }
 82                     return data;
 83                 })()
 84             }, {
 85                 name: '实时上行速率',
 86                 data: (function() {
 87                     // generate an array of random data
 88                     var data = [],
 89                         time = (new Date()).getTime(),
 90                         i;
 91   
 92                     for (i = -19; i <= 0; i++) {
 93                         data.push({
 94                             x: time + i * 1000,
 95                             y: Math.random()
 96                         });
 97                     }
 98                     return data;
 99                 })()
100             }]
101         };
102         chart = new Highcharts.Chart(options);
103         });
复制代码

html代码:

1 <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>



http://www.cnblogs.com/nancy0324/p/3757016.html

相关文章推荐

在网页上实现实时动态曲线——利用Highcharts控件和JQuery

Web上实现动态曲线 ——实时地从数据库中获取数据,并在网页上实现无刷新显示。        本文利用JavaScript实现,每隔3秒,从数据库中获取一个数据,并在网页上动态显示。并且当用鼠...
  • nuaazdh
  • nuaazdh
  • 2011年09月06日 22:00
  • 40354

Highcharts + jQuery + Servlet 实现从后台获取JSON实时刷新图表

不墨迹,直接上代码,亲测可用。
  • zhaizu
  • zhaizu
  • 2013年12月06日 17:35
  • 11362

使用HighCharts实现实时数据展示

在众多的工业控制系统领域常常会实时采集现场的温度、压力、扭矩等数据,这些数据对于监控人员进行现场态势感知、进行未来趋势预测具有重大指导价值。工程控制人员如果只是阅读海量的数据报表,对于现场整个态势的掌...
  • gzh0222
  • gzh0222
  • 2014年04月26日 16:59
  • 16213

jQuery基于Canvas的微信运动折线图动态曲线图插件 - wcMotionChart

一款基于HTML5 Canvas的微信运动折线图jQuery插件。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息,非常有用。 使用该微信运动折线...

jquery图表插件jqPlot实现曲线图

案例:         曲线图         "http://www.w3.org/TR/html4/loose.dtd">    html>    head>    meta http-e...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery生成曲线

用的jquery报表。有些属性要设置。 看效果 主要设置 1.数据来源数组 2.2个纵坐标。并且起始为0,行数设置。 3.横坐标日期显示。斜着显示。日期斜着显示找了半天...

Highcharts通过AJAX访问后台数据库实时刷新

最近项目中要做一个实时人流量的折线统计图,接触了下Highcharts在网上看了很多博客和官方API,总结出一下代码。$(function () { var chart = Highchart...

使用websocket和highcharts实现动态图标展示

利用阿里云物联网套件做一个物联网平台的demo,摸着石头过河. 到了这一步,需要在页面实施监控设备上报的数据, 之前用ajax结合highcharts试了下,前台要定时请求,比较被动,上报时间不一定,...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery结合highcharts插件显示实时数据动态曲线图
举报原因:
原因补充:

(最多只允许输入30个字)