<%@ 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. this,super,和继承

    this是指当前对象的引用,super是指直接父类的引用 比如 我建造一个类 public class Person(){ private String name; private  int age; ...

  2. mavne 工程jsp页面首行报错

    在pom.xml文件中加入servlet依赖 <dependency> <groupId>javax.servlet</groupId> <artifactI ...

  3. 白话SpringCloud | 第七章：分布式配置中心的使用

    前言 介绍完服务的容错保护处理,接下来我们来了解下关于分布式配置中心的相关知识和使用.众所周知,随着项目的越来越多,日益庞大,每个子项目都会伴随着不同的配置项,于此也就多了很多的配置文件.倘若某些配置 ...

  4. python数据处理

    1.数据清洗 1.1 数据格式化 数据格式化是数据清洗常见的形式之一,就是将可读性差的或无法阅读的数据转换成可读性较强的数据格式. python对字符串和数字都有格式化的方法,如%s, %d分别代表格 ...

  5. winform代码生成器(二)

    代码下载 地址 http://pan.baidu.com/s/1nuZjyat 接着说 上文继续说,这次我们要生成主从表. 此方用到了第三方的 控件 DevExpress 的Gridview .大家可 ...

  6. vim-plug

    vim包管理器vim-plug 安装 curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent. ...

  7. keras 自定义 custom 函数

    转自: https://kexue.fm/archives/4493/,感谢分享! Keras是一个搭积木式的深度学习框架,用它可以很方便且直观地搭建一些常见的深度学习模型.在tensorflow出来 ...

  8. Siebel应用数据结构层次

    在Siebel应用里数据在多个层次上使用了不同的定义方式,每一个层次侧重于数据的不同的特征,主要分为数据用户界面层定义(UI),业务逻辑层定义(Business Layer,可以是业务含义层)以及数据 ...

  9. PrintDocument打印、预览、打印机设置和打印属性的方法（较完整） .

    private void Form1_Load(object sender, System.EventArgs e) { //获取或设置一个值,该值指示是否发送到文件或端口 printDocument ...

  10. elenium2学习（十六）-- 富文本（自动发帖）

    前言 富文本编辑框是做web自动化最常见的场景,有很多小伙伴遇到了不知道无从下手,本篇以博客园的编辑器为例,解决如何定位富文本,输入文本内容 一.加载配置 1.打开博客园写随笔,首先需要登录,这里为了 ...