extjs--饼图

本篇文章将介绍extjs中自带的饼图。

代码如下：

Ext.define('ChartPieTest', {
    extend: 'Ext.panel.Panel',
    autoScroll : true,
    initComponent: function () {
        var me = this;
        me.store = me.createStore();
        me.grid = me.getGridPanel();
        me.mainPanel = Ext.create('Ext.panel.Panel',{
            layout:'fit',
            items:[me.grid],
        });

        Ext.apply(me,{
            layout:'fit',
            items:[me.mainPanel]
        });
        me.callParent();
        me.mainPanel.down('chart').on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            me.onCellClick(cellIndex, record);
        });
    },

    getGridPanel:function(){
        var me = this;
        return {
            xtype:'chart',
            insetPadding: 40,
            animate : true,// 是否支持动态数据变化
            legend: {// 图例
                position: "right",
                spacing: 12,
                padding: 5,
                font: {
                    name: 'Tahoma',
                    color: '#3366FF',
                    size: 12,
                    bold: true
                }
            },
            store:me.store,
            //axes:me.createAxes(),
            series:me.createSeries(),
        }
    },
    createStore: function () {
        var me = this;
        return Ext.create('Ext.data.JsonStore', {
            //从后端请求数据
          /*  fields: [
                {name: 'id', mapping: 'id'},
                {name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},
                'activeCount', 'effectiveCount','effectiveProportion',
            ],
            proxy: {
                type: 'ajax',
                url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',
                reader: {
                    type: 'json',
                    root: 'root',
                    totalProperty: 'totalProperty'
                }
            },
            listeners: {
                'beforeload': function (store, operation, eOpts) {
                    store.proxy.extraParams.selectYear = me.selectYear
                }
            },*/
          //自己模拟数据
            fields: ['name', 'data'],
            data: [
                { 'name': '中年人',   'data': 10 },
                { 'name': '婴儿',   'data':  7 },
                { 'name': '老年人', 'data':  5 },
                { 'name': '小孩',  'data':  2 },
                { 'name': '青少年',  'data': 27 }
            ],
            autoLoad: true
        });
    },

    
    createSeries: function () {
        var me = this;
        var columns = [
            {
                type: 'pie',
                angleField: 'data',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 40,
                    renderer: function(storeItem, item) {
                        // calculate and display percentage on hover
                        var total = 0;
                        me.store.each(function(rec) {
                            total += rec.get('data');
                        });
                        this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 5
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            },


        ];
        return columns;
    }

});

注：

1.上面中的createStore是创建饼图所需要的数据的--store。

2.上面中的legend 显示的右边的图例（表明哪块代表什么数据），legend中的position属性可以调节图例的位置。其中有‘left’、‘right’，‘bottom’、‘top’分别代表左右下上位置。

3.showInLegend是bool值，为false的时候不显示上面的图例。

4.tips这里是当鼠标放在饼图上的时候显示的提示性文字，其中的renderer方法中可设置提示哪些内容。

5.label 设置饼图上显示文字的一些属性。其中的display属性决定文字在饼图中位置，共有‘outside’、‘rotate’两种方式，前者表示文字显示在图表的外边，后者文字显示在图表的里边。