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'
            }];

        data.forEach(function(e, i, self) {
              e['data'] = Math.round(Math.random() * 100);
            });

        return data;
      }
      var store = Ext.create('Ext.data.JsonStore', {
            fields : ['name', 'data']
          });

      store.loadData(generateData());

      var donut = false;
      // chart饼图的容器
      var chart = Ext.create('Ext.chart.Chart', {
            xtype : 'chart',
            animate : true,
            store : store,
            shadow : true,
            legend : {
              position : 'right'
            },

            // 跟padding有点类似 饼图距离面板边的长度
            insetPadding : 60,
            theme : 'Base:gradients',

            // 饼图的设置
            series : [{
                  type : 'pie',
                  field : 'data',
                  showInLegend : true,
                  donut : donut,
                  // 鼠标经过时的显示的tips
                  tips : {
                    trackMouse : true,
                    width : 140,
                    height : 28,
                    renderer : function(storeItem, item) {
                      // calculate percentage.
                      var total = 0;
                      store.each(function(rec) {
                            total += rec.get('data');
                          });
                      this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100)
                          + '%');
                    }
                  },

                  // 高亮时 扇形偏移距离
                  highlight : {
                    segment : {
                      margin : 20
                    }
                  },

                  // 文字配置
                  label : {
                    field : 'name',
                    display : 'rotate',
                    contrast : true,
                    font : '18px Arial'
                  }
                }]
          });

      var panel = Ext.create('widget.panel', {
            width : 800,
            height : 600,
            title : 'Semester Trends',
            renderTo : Ext.getBody(),
            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 : false,
              text : 'Donut',
              toggleHandler : function(btn, pressed) {
                //chart.series是一个Ext.util.MixedCollection
                chart.series.first().donut = pressed ? 35 : false;
                chart.refresh();
              }
            }],
            items : chart
          });
    });
        </script>
        
    </head>
    <body>
    </body>
</html>

 

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