EXTJS 动态更新的折线图

来源：互联网发布：最新影视软件编辑：程序博客网时间：2024/05/01 05:15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>MyApp10</title>    <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>    <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-theme-neptune.js"></script>    <link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">    <script type="text/javascript" src="app.js"></script>       <!--ExtJs࠲ݜޡ˸-->    <script type="text/javascript">        //Ext.require('Ext.chart.*');Ext.onReady(function () {    var chart, timeAxis;    //随机生成数据    var generateData = (function() {        var data = [], i = 0,            last = false,            date = new Date(2011, 1, 1),            seconds = +date,            min = Math.min,            max = Math.max,            random = Math.random;        return function() {            data = data.slice();            data.push({                date:  Ext.Date.add(date, Ext.Date.DAY, i++),                visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),                views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),                veins: min(100, max(last? last.veins + (random() - 0.5) * 20 : random() * 100, 0))            });            last = data[data.length -1];            return data;        };    })();    var group = false,        groupOp = [{            dateFormat: 'M d',            groupBy: 'year,month,day'        }, {            dateFormat: 'M',            groupBy: 'year,month'        }];//chart重绘    function regroup() {        group = !group;        var axis = chart.axes.get(1),            selectedGroup = groupOp[+group];        axis.dateFormat = selectedGroup.dateFormat;        axis.groupBy = selectedGroup.groupBy;        chart.redraw();    }    var store = Ext.create('Ext.data.JsonStore', {        fields: ['date', 'visits', 'views', 'veins'],        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.DAY, 1);            chart.markerIndex = markerIndex;        }        store.loadData(gs);    }, 1000);    var win = Ext.create('Ext.window.Window', {        width: 800,        height: 500,        minHeight: 400,        minWidth: 550,        maximizable: true,        title: 'Live Updated Chart',        layout: 'fit',        items: [{            xtype: 'chart',            style: 'background:#fff',            store: store,            itemId: 'chartCmp',            axes: [{                type: 'Numeric',                minimum: 0,                maximum: 100,                position: 'left',                fields: ['views', 'visits', 'veins'],                title: 'Number of Hits',                grid: {                    odd: {                        fill: '#dedede',                        stroke: '#ddd',                        'stroke-width': 0.5                    }                }            }, {                type: 'Time',                position: 'bottom',                fields: 'date',                title: 'Day',                dateFormat: 'M d',                groupBy: 'year,month,day',                aggregateOp: 'sum',                constrain: true,                fromDate: new Date(2011, 1, 1),                toDate: new Date(2011, 1, 7)            }],            series: [{                type: 'line',                axis: ['left', 'bottom'],                xField: 'date',                yField: 'visits',                label: {                    display: 'none',                    field: 'visits',                    renderer: function(v) { return v >> 0; },                    'text-anchor': 'middle'                },                markerConfig: {                    radius: 5,                    size: 5                }            },{                type: 'line',                axis: ['left', 'bottom'],                xField: 'date',                yField: 'views',                label: {                    display: 'none',                    field: 'visits',                    renderer: function(v) { return v >> 0; },                    'text-anchor': 'middle'                },                markerConfig: {                    radius: 5,                    size: 5                }            },{                type: 'line',                axis: ['left', 'bottom'],                xField: 'date',                yField: 'veins',                label: {                    display: 'none',                    field: 'visits',                    renderer: function(v) { return v >> 0; },                    'text-anchor': 'middle'                },                markerConfig: {                    radius: 5,                    size: 5                }            }]        }]    }).show();    chart = win.child('#chartCmp');    timeAxis = chart.axes.get(1);});    </script>  </head>  <body>  </body>  </html>
0 0