<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<TITLE>实时更新数据的jQuery图表插件DEMO演示</TITLE>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript">

$(function () {

$(document).ready(function() {

    Highcharts.setOptions({

        global: {

            useUTC: false

        }

    });                                                                         

    var chart;

    $('#container').highcharts({

        chart: {

            type: 'spline',

            animation: Highcharts.svg, // don't animate in old IE

            marginRight: 10,

            events: {

                load: function() {                                              

                    // set up the updating of the chart each second

                    var series = this.series[0];

                    setInterval(function() {

                        var x = (new Date()).getTime(), // current time

                            y = Math.random();

                        series.addPoint([x, y], true, true);

                    }, 1000);

                }

            }

        },

        title: {

            text: 'CPU动态走势图--1秒'

        },

        xAxis: {

            type: 'datetime',

            tickPixelInterval: 100

        },

        yAxis: {

            title: {

                text: 'CPU动态走势图--1秒'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            formatter: function() {

                    return '<b>'+ this.series.name +'</b><br/>'+

                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+

                    Highcharts.numberFormat(this.y, 2);

            }

        },

        legend: {

            enabled: false

        },

        exporting: {

            enabled: false

        },

        series: [{

            name: 'Random data',

            data: (function() {

                // generate an array of random data

                var data = [],

                    time = (new Date()).getTime(),

                    i;                                                          

                for (i = -19; i <= 0; i++) {

                    data.push({

                        x: time + i * 1000,

                        y: Math.random()

                    });

                }

                return data;

            })()

        }]

    });

});                                                                             

});

</script>

</HEAD>

<BODY>

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

<div style="text-align:center;clear:both;">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

<form>

    <input type="hidden" name="abc" value="dfdf">

</form>

</BODY>

</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. 原创：E325: ATTENTION vim超完整超给力的问题与解决方法

    又到了老葵花哥哥开课的时间 这是给大家提供一个企业常见的错误 我相信大家生活还编程中会长期使用接触这个错误 这里我们经常用的两个选项 (E)dit any way 编辑原来的文件,忽略刚刚做的修改 ( ...

  2. ListView中含有EditText时候--要命的焦点问题迎刃而解

    最近做项目的时候遇到了一个问题,就是在ListView的item上面含有一个EditText,要求是这样: 1当点击item的时候,item可以点击; 2当点击EditText的时候EditText也 ...

  3. 平时有没有使用xml和json

    平时有没有使用xml和json,在ajax交互中,哪一种更易于开发和维护,js中怎么序列化JSON字符串? 有,json相比xml可读性和可扩张性好.编码及解码难度较低.在数据交互中带宽占用少,并且在 ...

  4. 环球影城母公司：务必阻止复仇者和 X 战警团聚

    今日导读 去年 12 月,迪士尼宣布收购 21 世纪福克斯后,许多漫威粉丝们马上欢呼:复仇者终于可以和 X 战警团聚了!然而,超级英雄大团圆这个美好景象恐怕不会那么容易实现.就在近日,环球影城母公司— ...

  5. Maven实战读书笔记（四）：Maven生命周期与插件

    Maven的生命周期是对所有构建过程的抽象和统一.包含了项目的清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等几乎所有构建步骤. Maven的生命周期是抽象的,其实际行为是由插件来完成 ...

  6. Python---哈夫曼树---Huffman Tree

    今天要讲的是天才哈夫曼的哈夫曼编码,这是树形数据结构的一个典型应用. !!!敲黑板!!!哈夫曼树的构建以及编码方式将是我们的学习重点. 老方式,代码+解释,手把手教你Python完成哈夫曼编码的全过程 ...

  7. luogu 5月月赛 #A

    T29693 取石子 题目描述 Alice 和 Bob 在玩游戏 他们有 n 堆石子,第 i 堆石子有ai​ 个,保证初始时 ai​≤ai+1​(1≤i<n) . 现在他们轮流对这些石子进行操作 ...

  8. 数论基础之组合数&计数问题

    一.组合数:问题引入:现在有 n 个球,取其中的 k 个球,问一共有多少种方式?答案: 公式直观解释:我们考虑有顺序地取出 k 个球:第一次有 n 种选择,第二次有 n-1 种选择,...,第 k 次 ...

  9. CentOS 7的docker安装初始化

    1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2: 添加软件源信息 添加阿里源这样下载 ...

  10. 分享下自己的EmpireofCode进攻策略 https://empireofcode.com/ https://empireofcode.com/game/#

    # 没什么用,该游戏的模块调用不友好,取数据难import queue from battle import commander # import math unit_client = command ...