ExtJS PieChart饼图

Json文件：

data1.json:

1 创建Pie Chart

往panel内拖入一个Pie Chart

2 store

创建store，url指定为data1.json，添加name和data1字段，sencha architect自动生成的代码：

Ext.define('MyApp10.store.PieChart', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            autoSync: true,
            storeId: 'PieChart',
            proxy: {
                type: 'ajax',
                url: 'data/chart/data1.json',
                reader: {
                    type: 'json'
                }
            },
            fields: [
                {
                    name: 'name'
                },
                {
                    name: 'data1'
                }
            ]
        }, cfg)]);
    }
});

3 属性设置

为Pie chart指定store；

指定Pie Chart的legend属性为right（使图例位于右侧）。

Pie Chart添加series，对pie series进行一下设置：

选择angleField为data1（数据项）

编辑tips属性，添加代码如下：

{
    trackMouse: true,
    width: '60px',
    renderer: function(storeItem, item) {
        //calculate percentage.
        var total = 0;
        Ext.getCmp('piechart').store.each(function(record) {
            total += record.get('data1');
        });

//显示提示信息
        this.setTitle(storeItem.get('name') + ': ' +Math.round(storeItem.get('data1') / total * 100)+ '%');
    }
}

编辑Label：

{'field':'name','display':'rotate','contrast':true,'font':'14px Arial'}

编辑highlight属性：

//鼠标移过片段突起
{
    segment: 
    {
       margin: 20
     }
}

4 代码

最终sencha architect生成的pie chart部分代码如下：

initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    height: 214,
                    id: 'piechart_tab',
                    width: 400,
                    title: 'PieChart',
                    items: [
                        {
                            xtype: 'chart',
                            height: 402,
                            id: 'piechart',
                            width: 495,
                            animate: true,
                            insetPadding: 20,
                            store: 'PieChart',
                            series: [
                                {
                                    type: 'pie',
                                    highlight: //鼠标移过片段突起
                                    {
                                        segment: {
                                            margin: 20
                                        }
                                    },
                                    label: {
                                        field: 'name',
                                        display: 'rotate',
                                        contrast: true,
                                        font: '14px Arial'
                                    },
                                    showInLegend: true,
                                    tips: {
                                        trackMouse: true,
                                        width: '60px',
                                        renderer: function(storeItem, item) {
                                            //calculate percentage.
                                            var total = 0;
                                            Ext.getCmp('piechart').store.each(function(record) {
                                                total += record.get('data1');
                                            });
                                            this.setTitle(storeItem.get('name') + ': ' +Math.round(storeItem.get('data1') / total * 100)+ '%');
                                        }
                                    },
                                    angleField: 'data1'
                                }
                            ],
                            legend: {
                                position: 'right'
                            }
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    title: 'Tab 2'
                },
                {
                    xtype: 'panel',
                    title: 'Tab 3'
                }
            ]
        });

        me.callParent(arguments);
    }

预览：

添加保存按钮

添加toolbar以及按钮，按钮的单击事件：

Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        Ext.getCmp('piechart').save({
                            type: 'image/png'
                        });
                    }
                });

即可将饼图保存为本地图片