Extjs 4 动态显示折线图按秒显示

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Extjs 4 动态显示折线图按秒显示相关的知识，希望对你有一定的参考价值。

<%@ 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 动态显示折线图按秒显示的主要内容，如果未能解决你的问题，请参考以下文章

使用动态数据显示绘制折线图？

java生成饼状图,条形图,折线图的技术可以动态的显示

Extjs 4 动态显示折线图 按秒显示

Extjs 4 动态显示折线图按秒显示