ExtJs_chart的使用说明

App.offi.chartstore = new Ext.data.JsonStore({
    fields:['name', 'visits', 'views'],
    data: [
        {name:'07年七月', visits: 245000, views: 3000000},
        {name:'07年八月', visits: 240000, views: 3500000},
        {name:'07年九月', visits: 355000, views: 4000000},
        {name:'07年十月', visits: 375000, views: 4200000},
        {name:'07年十一月', visits: 490000, views: 4500000},
        {name:'07年十二月', visits: 495000, views: 5800000},
        {name:'08年一月', visits: 520000, views: 6000000},
        {name:'08年二月', visits: 620000, views: 7500000}
    ]
});

/**
 * 图表Charts
 * @class App.offi.cenyebaoChart
 * @extends Ext.Panel
 */
App.offi.cenyebaoChart = Ext.extend(Ext.Panel, {
    title: "图表面板",
    layout: 'fit',
    
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: "linechart",
                store: App.offi.chartstore,
                xField: 'name',
                yField: "visits",
                listeners: {
                    itemclick: function(o) {    //节点单击事件监听
                        A.log("开始执行‘节点单击’事件");
                        var rec = App.offi.chartstore.getAt(o.index);
                        A.log("取得记录：{0}", rec.data);
                        Msg.alert(String.format("您查看的是{0}的信息！", rec.get("name")));
                        A.log("‘节点单击’事件完成");
                    }
                }
            }],
            bbar: ["->", {
                xtype: "button",
                text: "底部菜单工具按钮",
                menu: [{
                    text: "简单线型图(样式)",
                    listeners: {
                        scope: this,
                        click: this.onEasyExampleBtnClick
                    }                    
                }, {
                    text: "柱形图(复杂示例)",
                    listeners: {
                        scope: this,
                        click: this.onComplexExampleBtnClick
                    }
                }, {
                    text: "饼图",
                    listeners: {
                        scope: this,
                        click: this.onPieBtnClick
                    }
                }, {
                    text: "条形图",
                    listeners: {
                        scope: this,
                        click: this.onBarBtnClick
                    }
                }]
            }]
        });
        App.offi.cenyebaoChart.superclass.initComponent.call(this);    
    },
    
    //条形图
    onBarBtnClick: function() {
        A.log("条形图");
        
        var mainTab = ACom.getMainTab(),
            barTab = mainTab.get("MAIN_TAB_BARCHART");
        if(!barTab) {
            barTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
                id: "MAIN_TAB_BARCHART",
                title: "条形图",
                xtype: "offi-barChart",
                closable: true
            });
        }
        mainTab.setActiveTab(barTab);
    },
    
    //饼图
    onPieBtnClick: function() {
        A.log("饼图");
        
        var mainTab = ACom.getMainTab(),
            pieTab = mainTab.get("MAIN_TAB_PIECHART");
        if(!pieTab) {
            pieTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
                id: "MAIN_TAB_PIECHART",
                title: "饼图",
                xtype: "offi-pieChart",
                closable: true
            });
        }
        mainTab.setActiveTab(pieTab);
    },
    
    //柱形图
    onComplexExampleBtnClick: function() {
        A.log("柱形图");
        
        var mainTab = ACom.getMainTab(),
            complexTab = mainTab.get("MAIN_TAB_COMPLEXCHART");
        if(!complexTab) {
            complexTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
                id: "MAIN_TAB_COMPLEXCHART",
                title: "柱形图(复杂示例)",
                xtype: "offi-ComplexChart",
                closable: true
            });
        }
        mainTab.setActiveTab(complexTab);
    },
    
    //简单线型图(样式)
    onEasyExampleBtnClick: function() {
        A.log("简单线型图(样式)");
        
        var mainTab = ACom.getMainTab(),
            newTab = mainTab.get("MAIN_TAB_EASYCHART");
        if(!newTab) {
            newTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
                id: "MAIN_TAB_EASYCHART",
                title: "简单线性图(样式)",
                xtype: "offi-EasyChart",
                closable: true
            });
        }
        mainTab.setActiveTab(newTab);
    }
    
});
Ext.reg("offi-cenyebaoChart", App.offi.cenyebaoChart);

//条形图数据
App.offi.barStore = new Ext.data.JsonStore({
    // comedy_喜剧；action_动作；drama_戏剧；thriller_惊悚片；
    fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
    data: [
            {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
            {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
            {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
            {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
          ]
});
//条形图
App.offi.BarExample = Ext.extend(Ext.Panel, {
    title: "条形图",
    padding: 50,
    layout: "fit",
    
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: "stackedbarchart",
                store: App.offi.barStore,
                yField: 'year',
                series: [{
                    xField: 'comedy',
                    displayName: "Comedy"
                }, {
                    xField: "action",
                    displayName: "Action"
                }, {
                    xField: 'drama',
                    displayName: "Drama"
                }, {
                    xField: "thriller",
                    displayName: "Thriller"
                }],
                xAxis: new Ext.chart.NumericAxis({
                    labelRenderer: Ext.util.Format.usMoney,
                    title: "票房",
                    stackingEnabled: true    //接在一起，成一条而已。
                })
            }]
        });
        App.offi.BarExample.superclass.initComponent.call(this);
    }
    
});
Ext.reg("offi-barChart", App.offi.BarExample);


//饼图数据
App.offi.pieStore = new Ext.data.JsonStore({
    fields: ['season', 'total'],
    data: [{
        season: "夏季",
        total: 1500000
    }, {
        season: "秋季",
        total: 2450000
    }, {
        season: "冬季",
        total: 1170000
    }, {
        season: "春季",
        total: 1840000
    }]
});
//饼图
App.offi.PieExample = Ext.extend(Ext.Panel, {
    title: "饼图",
    padding: 100,
    layout: "fit",
    
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: "piechart",
                store: App.offi.pieStore,
                dataField: 'total', //数据
                categoryField: 'season',
                tipRenderer: function(chart, record, index, series) {
                    return record.data.season + '收益值为' + Ext.util.Format.number(record.data.total, '0,0');
                },
                extraStyle: {
                    legend: {
                        display: 'bottom',    //在底部显示类别
                        padding: 10,
                        font: {
                            family: '宋体',
                            size: 16    //字体大小
                        }
                    }
                }
            }]
        });
        App.offi.PieExample.superclass.initComponent.call(this);
    }
    
});
Ext.reg("offi-pieChart", App.offi.PieExample);

//柱形图
App.offi.ComplexExample = Ext.extend(Ext.Panel, {
    title: "柱形图(复杂示例)",
    layout: "fit",
    
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: "columnchart",
                store: App.offi.chartstore,
                xField: 'name',
                series: [{
                    type: "column",    //柱形
                    displayName: "PageViews",    //提示框里显示的名称
                    yField: 'views',
                    style: {
                        image: "bar.gif",
                        mode: "stretch",
                        color: "#607B8B"
                    }
                }, {
                    type: "line",
                    displayName: "Visits",
                    yField: 'visits',
                    style: {
                        color: "#B8860B"
                    }
                }],
                yAxis: new Ext.chart.NumericAxis({
                    displayName: "visits",
                    labelRenderer: Ext.util.Format.numberRenderer('0,0')
                }),
                tipRenderer: function(chart, record, index, series) {
                    if(series.yField == 'visits') {
                        return '在' + record.data.name + '中，有'+Ext.util.Format.number(record.data.visits,'0,0'+'人次访问！');
                    } else if(series.yField == 'views') {
                        return '在'+record.data.name+'中有'+Ext.util.Format.number(record.data.views,'0,0')+'访问量!';
                    }
                },
                chartStyle: {
                    padding: 50,
                    animationEnable: true,
                    font: {    // 对轴文字进行修饰
                        name: "Tahoma",
                        color: 0x15428B,
                        size: 11
                    },
                    dataTip: {    // 节点提示框
                        padding: 5,
                        border: {    // 边框，颜色默认为黑色。
                            size: 3,
                            color: 0x99bbe8    //淡蓝
                        },
                        background: {
                            color: 0xDAE7F6,    //淡蓝
                            alpha: .8    //透明度:值越小越透明。
                        },
                        font: {
                            name: "Tahoma",    //宋体
                            color: 0x15428B,
                            size: 11,
                            bold: true
                        }
                    },
                    xAxis: {
                        //color: 0x69aBc8,
                        majorGridLines: {size: 1, color: 0xdfe8f6}
                    },
                    yAxis: {
                        //color: 0x69aBc8,    // Y轴颜色
                        majorTicks: {length: 16},    //这设置Y轴分割线长短
                        minorTicks: {length: 8},
                        majorGridLines: {size: 1, color: 0xdfe8f6}    //Y轴横过来的线:0xdfe8f6为微蓝色；
                    }
                }
            }]
        });
        App.offi.ComplexExample.superclass.initComponent.call(this);
    }
    
});
Ext.reg("offi-ComplexChart", App.offi.ComplexExample);


//简单线型图(样式)
App.offi.EasyExample = Ext.extend(Ext.Panel, {
    title: "简单线型图(样式)",
    layout: "fit",
    padding: 50,
    
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: "linechart",
                store: App.offi.chartstore,
                xField: "name",
                yField: "visits",
                yAxis: new Ext.chart.NumericAxis({    //对Y轴数据进行格式化。
                    displayName: "visit",
                    labelRenderer: Ext.util.Format.numberRenderer('0,0')
                }),
                tipRenderer: function(chart, record) {    //节点提示框
                    return '在' + record.data.name + "中，有" + Ext.util.Format.number(record.data.visits, '0,0')+'人次访问！';
                }
            }]
        });
        App.offi.EasyExample.superclass.initComponent.call(this);
    }
    
});
Ext.reg("offi-EasyChart", App.offi.EasyExample);