$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $('#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().getSecond, // current time
                                y = Math.random();
                            series.addPoint([x, y], true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                tickInterval:(new Date()).getTime().getSecond
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.x + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                },
                crosshairs:[true,true]//显示十指线
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime().getSecond,
                        i;
                    for (i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time ,
                            y: Math.random()
                        });
                    }
                    return data;
                }())
            }]
        });
    });
});

实时动态更新曲线图,x轴时间s随数据的变化而变化的更多相关文章

  1. 5-Highcharts曲线图之轴反转

    <!DOCTYPE> <html lang='en'> <head> <title>5-Highcharts曲线图之轴反转</title> ...

  2. SQL存在一个表而不在另一个表中的数据, 更新字段为随机时间

    --更新字段为随机时间 86400秒=1天 UPDATE dl_robot ), ,GETDATE()) )   SQL存在一个表而不在另一个表中的数据   方法一 使用 not in ,容易理解,效 ...

  3. Mark Russinovich 的博客:Windows Azure 主机更新:原因、时间和方式

     Mark Russinovich的技术博客涵盖 Windows故障排除.技术和安全等主题. Windows Azure主机更新:原因.时间和方式 Windows Azure的计算平台(其中包括 ...

  4. DataPipeline CTO 陈肃:我们花了3年时间,重新定义数据集成

    目前,中国企业在大数据流通.交换.利用等方面仍处于起步阶段,但是企业应用数据集成市场却是庞大的.根据 Forrester 数据看来,2017 年全球数据应用集成市场纯软件规模是 320 亿美元,如果包 ...

  5. 实时更新Excel文档外部数据源的数据

    实时更新Excel文档外部数据源的数据 单元格区域.Excel 表.数据透视表或数据透视图均可以连接到外部数据源(数据源:用于连接数据库的一组存储的"源"信息.数据源包含数据库服务 ...

  6. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  7. 定时器:为 Windows 实现一个连续更新,高精度的时间供应器

    原著:Johan Nilsson 翻译:lxhui 原文出处:MSDN Magazine March 2004(Timers...) 原代码下载: HighResolutionTimer.exe (4 ...

  8. dedecmsV5.7织梦后台更新文章,发布时间不自动更新

    问题:dedecmsV5.7后台修改文章的时候,会更新发布时间,需求是不自动更新时间,还是当时的发布时间 解决: 1.修改后台文件夹/templets/archives_edit.htm,articl ...

  9. Redis设置和更新Key的过期时间

    EXPIRE key seconds 为给定 key 设置生存时间,当 key 过期时(生存时间为 0 ),它会被自动删除. 在 Redis 中,带有生存时间的 key 被称为『易失的』(volati ...

随机推荐

  1. Android安全相关书籍汇总

    Android安全相关书籍汇总http://blog.csdn.net/testing_is_believing/article/details/22936695

  2. Mybatis 动态获取字段值(不需要创建javabean)

    最近遇到一个这样的需求,如下: 用户可以通过自定义模板选择需要查询显示的字段,需要动态查询显示. 前提:数据库有一张表,里面有400多个字段. 要求:用户在前台可以自定义模板,一个模板可能对应x个字段 ...

  3. 用js实现简单排序算法

    一.冒泡排序 var arr1=[3,9,2,7,0,8,4]; for(var i=0;i<arr1.length;i++){ for(var j=i+1;j<arr1.length;j ...

  4. php处理字符串常用函数

    1查找字符位置函数: strpos($str,search,[int]):查找search在$str中的第一次位置从int开始: stripos($str,search,[int]):函数返回字符串在 ...

  5. 跨站脚本攻击(XSS)

    跨站脚本攻击(XSS) XSS发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中就出现了不被预期的脚本执行. 跨站脚本的重点不是在“跨站”上,而应该在“脚本上” 简单例子 ...

  6. ASPxGridView动态创建表格列编辑模板

    在项目中用到了DevExpress的ASPxGridview控件,每每去配置它的时候,总感觉很是啰嗦,于是想到了用代码自动配置. 于是有了这样的代码: foreach (ZiyuWeb.Entity. ...

  7. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

  8. 关于ServletConfig的小结

         在Servlet的配置文件中,可以使用一个或多个<init-param>标签为servlet配置一些初始化参数.当servlet配置了初始化参数后,web容器在创建servlet ...

  9. awk与cut在以空格为分割域时的区别

    awk默认以空格为分割域,比如我想获得某进程pid:[root@SHCTC-GAME12-44 ~]# ps -ef|grep "sshd -f"|grep -v greproot ...

  10. java多线程总结五:线程池的原理及实现

    1.线程池简介:     多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力.        假设一个服务器完成一项任务所需时间为:T1 创 ...