1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <TITLE>实时更新数据的jQuery图表插件DEMO演示</TITLE>
  6.  
  7. <script type="text/javascript" src="js/jquery.js"></script>
  8. <script type="text/javascript" src="js/highcharts.js"></script>
  9.  
  10. <script type="text/javascript">
  11. $(function () {
  12. $(document).ready(function() {
  13.     Highcharts.setOptions({
  14.         global: {
  15.             useUTC: false
  16.         }
  17.     });                                                                         
  18.  
  19.     var chart;
  20.     $('#container').highcharts({
  21.         chart: {
  22.             type: 'spline',
  23.             animation: Highcharts.svg, // don't animate in old IE
  24.             marginRight: 10,
  25.             events: {
  26.                 load: function() {                                              
  27.  
  28.                     // set up the updating of the chart each second
  29.                     var series = this.series[0];
  30.                     setInterval(function() {
  31.                         var x = (new Date()).getTime(), // current time
  32.                             y = Math.random();
  33.                         series.addPoint([x, y], true, true);
  34.                     }, 1000);
  35.                 }
  36.             }
  37.         },
  38.         title: {
  39.             text: 'CPU动态走势图--1秒'
  40.         },
  41.         xAxis: {
  42.             type: 'datetime',
  43.             tickPixelInterval: 100
  44.         },
  45.         yAxis: {
  46.             title: {
  47.                 text: 'CPU动态走势图--1秒'
  48.             },
  49.             plotLines: [{
  50.                 value: 0,
  51.                 width: 1,
  52.                 color: '#808080'
  53.             }]
  54.         },
  55.         tooltip: {
  56.             formatter: function() {
  57.                     return '<b>'+ this.series.name +'</b><br/>'+
  58.                     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
  59.                     Highcharts.numberFormat(this.y, 2);
  60.             }
  61.         },
  62.         legend: {
  63.             enabled: false
  64.         },
  65.         exporting: {
  66.             enabled: false
  67.         },
  68.         series: [{
  69.             name: 'Random data',
  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.     });
  86. });                                                                             
  87.  
  88. });
  89. </script>
  90. </HEAD>
  91.  
  92. <BODY>
  93.  
  94. <div id="container" style="width:700px;height:400px;margin:0 auto;"></div>
  95. <div style="text-align:center;clear:both;">
  96. <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
  97. <script src="/follow.js" type="text/javascript"></script>
  98. </div>
  99. <form>
  100.     <input type="hidden" name="abc" value="dfdf">
  101. </form>
  102. </BODY>
  103. </HTML>

实时更新数据的jQuery图表插件DEMO演示的更多相关文章

  1. 数据可视化：Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

  2. 不错的jQuery图表插件 .

    很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...

  3. 一款可定制的外国jQuery图表插件jqplot

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...

  4. 代码：jquery自定义插件 demo

    jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...

  5. Qt之模型/视图（实时更新数据）

    上两节简单介绍了Qt中对于模型/视图的编程,大部分助手里说的很清楚了,现在就开始实战部分吧! 在实际应用中,视图展示的数据往往并非一成不变的,那么如何实时更新成了一个很重要的问题!功能:(1)添加委托 ...

  6. jQuery导航插件One-Page-Nav演示-显示命名锚记

    jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...

  7. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  8. 实时更新数据，无需刷新：a,如何使用Turbolinks clearCache(), b Action Cable

    视频: https://gorails.com/episodes/how-to-use-turbolinks-clearCache?autoplay=1 用途: 更方便的实时从服务器更新局部网页,在这 ...

  9. AJAX制作JSON格式的实时更新数据的方法

    之前有写过这样的文章,但是出现了几个问题,第一,如果每秒都像数据库发送请求势必会造成服务器的压力过大,第二,如果使用JS的话,是不可以取得系统时间的,因为JS运行在客户端,所以只能取得客户端时间, 如 ...

随机推荐

  1. 11G RAC环境数据库启动和关闭

    一步启动Oracle (1) 启动整个集群 # ./crsctl start cluster -all -all选项启动整个集群. 不加-all选项只能启动本节点的服务. (2) 启动本节点集群 以下 ...

  2. how to get many stars on Github?

    some key points: 1: make a beautiful README file2: use some GIF (google some tools to convert videos ...

  3. Django的架构

    简介 Django继承并简化了MVC架构.MVC中的Controller部分基本全由Django完成.View部分被分割成两部分,即:负责HTML渲染的模板和负责显示逻辑的视图.所以Django又被称 ...

  4. flask_第一个程序

    安装flask sudo pip3 install flask falsk最小应用 from flask import Flask app = Flask(__name__) @app.route(' ...

  5. springboot测试的时候插入数据: error performing isolated work; SQL [n/a]; nested exception is org.hibernate...

    上网查了一下,说的是自增惹得麻烦!!在@GeneratedValue后面加上框框中的内容就OK拉!

  6. faster rcnn的改进方向

    http://blog.csdn.net/linolzhang/article/details/74159463 http://blog.csdn.net/linolzhang/article/det ...

  7. 批量下载ts视频文件

    第一步 使用chrome 按F12进入开发模式,拖动视频进度条到视频结束: 然后找到.m3u8以结尾的文件并保存为文本文件. 第二步 点开查看里面是否存在如下以ts结尾的文件内容 ...... /20 ...

  8. EBS ORACLE使用API批量取消销售订单

    需要切换组织,还有用户的id.下面红色字体代表要修改的地方. /*BEGIN MO_GLOBAL.INIT('M'); MO_GLOBAL.set_policy_context ('S',); FND ...

  9. root连接ubuntu18.04“拒绝访问”的解决方法

    1.设置root账户 sudo passwd root 2.ssh远程登陆拒绝访问:修改SSH配置文件 sudo vim /etc/ssh/sshd_config 找到并用#注释掉这行:PermitR ...

  10. 如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...