<%@ 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. ACdream 1099——瑶瑶的第K大——————【快排舍半，输入外挂】

    瑶瑶的第K大 Time Limit:2000MS     Memory Limit:128000KB     64bit IO Format:%lld & %llu Submit Status ...

  2. Java Bean Validation（参数校验） 最佳实践

    转载来自:http://www.cnblogs.com 参数校验是我们程序开发中必不可少的过程.用户在前端页面上填写表单时,前端js程序会校验参数的合法性,当数据到了后端,为了防止恶意操作,保持程序的 ...

  3. Android - Rxjava 使用和原理

    用RxJava写的一个Android的小Demo 我所理解的RxJava——上手其实很简单 http://www.jianshu.com/p/5e93c9101dc5

  4. Python 动态加载 Extension Manager Classes

    看着看着发现了一个库:stevedore(http://stevedore.readthedocs.org/en/latest/managers.html),但是感觉文档做得不行啊,都没个tutori ...

  5. js 的起源故事

    "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力 ...

  6. Android 笔记之 Android 系统架构

    Android笔记之Android系统架构 h2{ color: #4abcde; } a{ color: blue; text-decoration: none; } a:hover{ color: ...

  7. FragmentActivity的简单使用

    如图是效果图 当  点击下面 不同 的按钮 进入 不同的界面 其中 要一个 主布局当做容器 , 和3个不同的 布局来对应下面的3个按钮界面 主程序的 代码和布局如下 import android.su ...

  8. latex在线编辑网址

    https://www.overleaf.com/7876326cfzygjtvbrzh#/27713363/

  9. C#程序集

    我的理解: 程序集是一个物理上的概念,一个项目生成的exe或者dll都可以叫做一个程序集,internal修饰的内容可以在程序集内可见.

  10. JS实现“双色球”

    需求: 双色球玩法简单介绍: “双色球”彩票投注区分为红色球号码区和蓝色球号码区.每注投注号码由6个红色球号码和1个蓝色球号码组成.红色球号码从1--33中选择:蓝色球号码从1--16中选择.程序要求 ...