<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>Test</title>

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

        <jsp:include page="/common/Extjs.jsp"></jsp:include>

        <link rel="stylesheet" type="text/css" href="/css/storageSpaceBar.css" />

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

        <script>

        Ext.onReady(function () {

            var chart, timeAxis;

            var nowDate = new Date(Ext.Date.format(new Date(),'Y-m-d H:i:s'));  //当前时间

            //产生数据

            var generateData = (function() {

                var data = [], i = 0,

                last = false,

                    date = nowDate,

                    min = Math.min,

                    max = Math.max,

                    random = Math.random;

                return function() {

                    data = data.slice();

                    data.push({

                        date:  Ext.Date.add(date, Ext.Date.SECOND, i++),

                        visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0))

                    });

                     last = data[data.length -1];

                    return data;

                };

            })();

            var store = Ext.create('Ext.data.JsonStore', {

                fields: ['date', 'visits'],

                data: generateData()

            });

            //每隔一秒执行

            var intr = setInterval(function() {

                var gs = generateData();  //产生数据

                var toDate = timeAxis.toDate,//时间轴结束时间

                    lastDate = gs[gs.length - 1].date,    //获取最后一个时间点

                    markerIndex = chart.markerIndex || 0;

                if (+toDate < +lastDate) {

                    markerIndex = 1;

                    timeAxis.toDate = lastDate;    //修改截至时间

                    timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.SECOND, 1);//修改开始时间+1

                    chart.markerIndex = markerIndex;

                }

                store.loadData(gs);

            }, 1000);

            var win = Ext.create('Ext.window.Window', {

                width: 800,

                height: 300,

                autoShow: true,

                layout: 'fit',

                items: [{

                    xtype: 'chart',

                    style: 'background:#fff',

                    itemId: 'chartCmp',

                    store: store,

                    shadow: false,

                    animate: true,

                    axes: [{

                        type: 'Numeric',

                        minimum: 0,

                        maximum: 100,

                        position: 'left',

                        grid:true,

                        fields: ['visits']

                    }, {

                        type: 'Time',

                        position: 'bottom',

                        fields: 'date',

                        dateFormat: 'H:i:s',//时

                        groupBy: 'year,month,day,hour,minute,second',

                        step: [Ext.Date.SECOND, 1], //默认为天

                        grid:true,

                        aggregateOp: 'sum',

                        constrain: true,

                        fromDate: nowDate,    //当前时间

                        toDate: Ext.Date.add(nowDate,Ext.Date.SECOND,20)//6秒后时间

                    }],

                    series: [{

                        type: 'line',

                        showMarkers:false,

                        smooth: false,

                        axis: ['left', 'bottom'],

                        xField: 'date',

                        yField: 'visits'

                    }]

                }]

            });

            chart = win.child('#chartCmp');

            timeAxis = chart.axes.get(1);

        });

        </script>

    </head>

    <body>

    </body>

</html>

官方example按天数走得，稍微修改了一下弄成了时分秒，按秒更新的（留存参考）

效果图：

Extjs 4 动态显示折线图 按秒显示的更多相关文章

  1. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  2. 微信小程序echart 折线图legend不显示的问题

    最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:

  3. echarts - 折线图 - 每秒刷新数据并显示

    function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; var ...

  4. python 绘图---2D、3D散点图、折线图、曲面图

    python中绘制2D曲线图需要使用到Matplotlib,Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形,通过 Matplo ...

  5. [Python Study Notes]折线图绘制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  6. excel怎么制作实线虚线混排的折线图

    excel怎么制作实线虚线混排的折线图 excel怎么制作实线虚线混排的折线图?excel表格中想要设计的图表是实线的,想要让图标同时显示虚线和实线,该怎么操? 通常在在使用折线图描述数据的趋势时,前 ...

  7. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

  8. python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）

    最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...

  9. excel在一个图表内，显示折线图和柱状图

      折线图和柱状图,在同一个图表中拆分显示   一个图,设置主坐标轴 另外一个图,设置次坐标轴     拆分,通过调整纵坐标的最小值和最大值来实现     关于图表的标题,选中图表,选择布局,然后图表 ...

随机推荐

  1. Scala安装及开发环境搭建

    最近想学习下scala,为后面转大数据做一些沉淀. 1. 首先保证jdk已经成功安装 2. 去官网下载scala安装程序 http://www.scala-lang.org/download/all. ...

  2. [转]Oracle job procedure 存储过程定时任务

    本文转自:http://www.cnblogs.com/hoojo/p/oracle_procedure_job_interval.html oracle job有定时执行的功能,可以在指定的时间点或 ...

  3. Windows的任务管理器怎么显示进程的图标

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Windows的任务管理器怎么显示进程的图标.

  4. 01.c#中的访问修饰符

    public  公开的 private 私有的,只能在当前类的内部访问 protected  受保护的,只能在当前内的内部以及该类的子类可以访问. internal    可以在同一个程序(项目)集中 ...

  5. c#解析json字符串处理（最清晰易懂的方法）

    注:博客迁移到csdn,本文最新地址:https://blog.csdn.net/sajiazaici/article/details/77647625 以下为原文 本文是全网第二简单的方法,因为我女 ...

  6. 高效的jQuery代码编写技巧

    缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $(); // 建议 $element = $('#element'); ...

  7. 提交自己的包到 npm 中

    npm npm全称Node Package Manager,是node.js的模块依赖管理工具.使用github管理NPM包的代码,并定期提交至NPM服务器:npm官网 提交自己开发的NPM包 创建p ...

  8. js如何设置一个倒计时

    //申明一个定时器 let endInterval; //结束时间(毫秒数,这里是距离 1970 年 1 月 1 日至今的毫秒数) let endSeconds; //结束时间差 const ENDT ...

  9. 【Mood 21】要不要重复造轮子

    90%的人应该使用另外10%的人制造的轮子 但是每个人都应该有能力去创造属于自己的轮子 使用不代表伸手拿来,使用也是需要学习的,使用也可以升级为创新,关键在于这个轮子是在谁的手中! 90%的能套用着别 ...

  10. Windows下COCOS2D-X开发环境配置

    1. 下载Android SDK: http://developer.android.com/sdk/index.html ,解压到E:\ADT 目录下 2. 下载NDK: http://develo ...