<%@ 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. codeigniter读取数据库的公共配置并全局缓存的实现方案

    引言 学习CodeIgniter大概有几天了.从第一天了解后,对CI情有独钟,比较符合我的风格.其实一直以来对框架这块不太敏感.自己长时间的开发,也有一套自己的开发风格和习惯.但是这年头,你说你不会框 ...

  2. mysql中字段类型是datetime时比较大小问题

    select sum(studychj) as tofflinejz from afterline where studybegin >= '2010-01-01 00:00:00' and s ...

  3. C# 深入理解String

    关于C#中的类型 在C#中类型分为值类型和引用类型,引用类型和值类型都继承自System.Object类,几乎所有的引用类型都直接从System.Object继承,而值类型具体一点则继承System. ...

  4. dpkg: error: dpkg status database is locked by another process 解决方法

    使用dpkg -i/apt命令安装,报错: ------------------------------------------------------------- dpkg: error: dpk ...

  5. 在浏览器中对访问的网页中的cookie添加和修改

    做权限相关的东西,使用到了cookie,关于它的安全性,cookie在浏览器中,通过插件是可以对其进行修改的,如下: 1.FireFox 安装Edit This Cookie 插件,之后点击插件图标即 ...

  6. GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...

  7. Topcoder SRM 563 Div1 500 SpellCards

    题意 [题目链接]这怎么发链接啊..... 有\(n\)张符卡排成一个队列,每张符卡有两个属性,等级\(li\)和伤害\(di\). 你可以做任意次操作,每次操作为以下二者之一: 把队首的符卡移动到队 ...

  8. angularjs如何默认选中radio

    (1). 使用 ng-checked 即可.   <label class="radio-inline"> <input name="display&q ...

  9. LotusScript_文档查询循环方法整理

    1.  视图(View)查询 ... Set view = db.GetView("ViewName") Set doc = view.GetFirstDocument While ...

  10. SharePoint Config database Log file too big – reduce it!

    SharePoint Config database logs are one thing to keep an eye on since they do have a tendency to gro ...