extjs4 折线图（实时动态展现数据）实例

建议用chrome或firefox打开 ie有可能有兼容性问题

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>独乐不如众乐</title>
        <link href='http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css' rel='stylesheet' type='text/css' />    
        <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>
    
        
        <script type="text/javascript">
        Ext.onReady(function() {

  // 随机测试数据的生成
  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 store = Ext.create('Ext.data.JsonStore', {
        fields : ['date', 'visits', 'views', 'veins'],
        data : generateData()
      });

  var win = Ext.create('Ext.window.Window', {
        width : 800,
        height : 600,
        minHeight : 400,
        minWidth : 550,
        maximizable : true,
        title : 'Live Updated Chart',
        layout : 'fit',
        items : [{
              xtype : 'chart',
              style : 'background:#fff',
              store : store,
              itemId : 'chartCmp',
              animate : true,
              // y轴
              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',
                    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();

  var chart, timeAxis;
  // 获取chart
  chart = win.child('#chartCmp');
  // 获取时间轴
  timeAxis = chart.axes.get(1);

  // store定期加载测试数据
  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(timeAxis.fromDate, Ext.Date.DAY, 1);
          chart.markerIndex = markerIndex;
        }
        store.loadData(gs);
      }, 1000);

});
        </script>
        
    </head>
    <body>
    </body>
</html>

 

posted @ 2013-08-07 17:20  21實際源代碼  阅读(3400)  评论(0)    收藏  举报