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() {

      // 随机数据的生成
      function generateData() {
        var data = [{
              'name' : 'metric one'
            }, {
              'name' : 'metric two'
            }, {
              'name' : 'metric three'
            }, {
              'name' : 'metric four'
            }, {
              'name' : 'metric five'
            }];

        for (var index = 1; index < 6; index++) {
          data.forEach(function(e, i, self) {
                e['data' + index] = Math.round(Math.random() * 100);
              });
        }

        return data;
      }

      var store = Ext.create('Ext.data.JsonStore', {
            fields : ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
            data : [{
                  'name' : 'metric one',
                  'data1' : 100,
                  'data2' : 120,
                  'data3' : 140,
                  'data4' : 80,
                  'data5' : 130
                }, {
                  'name' : 'metric two',
                  'data1' : 7,
                  'data2' : 8,
                  'data3' : 16,
                  'data4' : 10,
                  'data5' : 3
                }, {
                  'name' : 'metric three',
                  'data1' : 5,
                  'data2' : 2,
                  'data3' : 14,
                  'data4' : 12,
                  'data5' : 7
                }, {
                  'name' : 'metric four',
                  'data1' : 2,
                  'data2' : 14,
                  'data3' : 6,
                  'data4' : 1,
                  'data5' : 23
                }, {
                  'name' : 'metric five',
                  'data1' : 27,
                  'data2' : 38,
                  'data3' : 36,
                  'data4' : 13,
                  'data5' : 33
                }]
          });

      var chart = Ext.create('Ext.chart.Chart', {
            style : 'background:#fff',
            animate : true,
            store : store,
            legend : {
              position : 'bottom'
            },
            axes : [{
                  type : 'Numeric',
                  position : 'left',
                  fields : ['data1', 'data2', 'data3', 'data4', 'data5'],
                  title : 'Number of Hits',
                  grid : {
                    odd : {
                      opacity : 1,
                      fill : '#ddd',
                      stroke : '#bbb',
                      'stroke-width' : 1
                    }
                  },
                  minimum : 0,
                  adjustMinimumByMajorUnit : true
                }, {
                  type : 'Category',
                  position : 'bottom',
                  fields : ['name'],
                  title : 'Month of the Year',
                  grid : true,
                  label : {
                    rotate : {
                      degrees : 315
                    }
                  }
                }],
            series : [{
                  type : 'area',
                  highlight : false,
                  axis : 'left',
                  xField : 'name',
                  yField : ['data1', 'data2', 'data3', 'data4', 'data5'],
                  style : {
                    opacity : 0.93
                  }
                }]
          });

      var win = Ext.create('Ext.window.Window', {
            width : 800,
            height : 600,
            minHeight : 400,
            minWidth : 550,
            hidden : false,
            shadow : false,
            maximizable : true,
            title : 'Area Chart',
            autoShow : true,
            layout : 'fit',
            tbar : [{
              text : 'Save Chart',
              handler : function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?',
                    function(choice) {
                      if (choice == 'yes') {
                        chart.save({
                              type : 'image/png'
                            });
                      }
                    });
              }
            }, {
              text : 'Reload Data',
              handler : function() {

                store.loadData(generateData());

              }
            }, {
              enableToggle : true,
              pressed : true,
              text : 'Animate',
              toggleHandler : function(btn, pressed) {
                chart.animate = pressed ? {
                  easing : 'ease',
                  duration : 500
                } : false;
              }
            }],
            items : chart
          });
    });
        </script>
        
    </head>
    <body>

        <div id="my-div"></div>

    </body>
</html>

 

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