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

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

  • 2016年10月19日 15:11
  • 59KB
  • 下载

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

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

highcharts插件动态添加数据(图表内容)

$('#container').highcharts({ chart: { renderTo: 'container', ...
  • u010691123
  • u010691123
  • 2014年03月19日 16:18
  • 1506

highchart 动态添加数据

Highcharts是一个制作图表的纯Javascript类库,支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;使用需要导入jquery.js,highcharts....
  • spjhandsomeman
  • spjhandsomeman
  • 2015年03月20日 14:34
  • 699

使用HighCharts实现实时数据展示

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

highcharts动态获得后台数据数据

highcharts动态获得后台数据数据 highcharts是功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库 中文学习网址:http://www.hcharts.cn/ 一、...
  • kpchen_0508
  • kpchen_0508
  • 2015年05月29日 11:14
  • 2613

highcharts设置背景颜色,设置数据点单位,加大字体等

这里收藏一个很棒的网址:http://www.highcharts.me/test/index.php?from=demo&p=11直接看代码: $(function () { ...
  • lishirong
  • lishirong
  • 2014年12月02日 09:53
  • 10645

进一步封装highchart,打造自己的图表插件:jHighChart.js

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合...
  • chenssy
  • chenssy
  • 2015年01月30日 17:24
  • 7220

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

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

使用HighCharts实现实时数据展示

使用HighCharts实现实时数据展示   在众多的工业控制系统领域常常会实时采集现场的温度、压力、扭矩等数据,这些数据对于监控人员进行现场态势感知、进行未来趋势预测具有重大指导价值。工程控制人员...
  • dufufd
  • dufufd
  • 2017年11月28日 10:26
  • 88
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery结合highcharts插件显示实时数据动态曲线图
举报原因:
原因补充:

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