<%@ 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. ADO.NET教程（1）初识ado.net

    ADO.NET简介 ADO.NET使用到的类 需掌握的方法和属性 ado.net连接实例 ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的 ...

  2. 当Activity出现Exception时是如何处理的？

    1.ActivityThread 2.PerformStop 在这里会调用mWindow.closeAllPanels(),从而关闭OptionMenu, ContextMenu.如果自己通过Wind ...

  3. linux定时任务crontab的使用

    crond进程: crond是linux下用来周期性地执行某种任务的一个守护进程,安装操作系统默认会安装此服务工具,并且会自动启动crond进程. 设置定时任务过程: 1. 创建任务文件(.sh) [ ...

  4. mysql七：索引原理与慢查询优化（待完整）

    一.介绍 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要. 索引优化应该是对查询性能优 ...

  5. 10th week task -2 Object 的起源

    Objective-C与C++.Java等面向对象语言类似,不过很多方面有所差别.若是用过另一种面向对象语言,那么就能理解Objective-C所用的许多范式与模版了.然而语法上也许会显得陌生,因为该 ...

  6. JDBC实现动态查询

    一 概述 1.什么是动态查询? 从多个查询条件中随机选择若干个组合成一个DQL语句进行查询,这一过程叫做动态查询. 2.动态查询的难点 可供选择的查询条件多,组合情况多,难以一一列举. 3.最终查询语 ...

  7. sharepoint2007就地升级2010系列（一）2007概览

    大家可能熟悉了sharepoint2010,熟悉了sharepoint2013,做了N多个项目,但是有没有做过从sharepoint2007升级或者迁移到sharepoint2010的项目呢?我们做实 ...

  8. Visual Studio Code打开终端控制台

    刚学习Node.js开发,使用vscode开发工具.一开始使用Windows命令窗口输出Node结果,但是觉得太麻烦了,每次都要从vscode开发工具切换到Windows命令窗口,来来回回. 然后想, ...

  9. LeAndroid招聘汇总

    招聘Android通讯开发经理 工作地点:北京-朝阳区 工作经验:3-5年 薪资范围:¥ 面议 学历要求:本科以上 职责描述1.负责设计指导开发和优化Android网络通讯相关功能:2.负责设计指导开 ...

  10. conversion vs recommendation

    conversion vs recommendation: http://markdisomma.com/2011/06/16/conversation-vs-recommendation/