ExtJs4實戰流量統計系統----流量數據展現（四）

這塊內容，是點擊左側欄目列表中的欄目後，加載到中間內容區域（Tab選項卡）的的內容。

這個，在整個系統中，是相對簡單的功能。

一個Panel，上邊是Chart，下邊是詳細數據。

惟一值得說一下的就是圖表類型切換，也就是：餅狀圖和柱狀圖的切換。

實現過程

我本來是但願只切換Chart組件的axes和series屬性，但簡單嘗試了一下，沒成功，因爲時間關係，便放棄了。

轉而採用最簡單的方式：就是把現有Chart銷燬，而後再從新建立新的Chart。

切換按鈕代碼：

        this.turnAction = Ext.create('Ext.Action', {
            text: '切換爲柱狀圖',
            iconCls: 'icon_chartbar',
            scope: this,
            handler: function () {
                this.chartType = !this.chartType;
                this.buildChart(true);
            }
        });

具體實現代碼：

buildChart: function (isRemove) {
        var me = this;
        if (isRemove) {
            this.chartBox.removeAll(true);
        }
        if (this.chartType) {
            var strTitle = "";
            var areaType = this.areaTypeField.getValue();
            if (areaType == '1') {
                strTitle = '省份';
            }
            else if (areaType == '2') {
                strTitle = '大區';
            }
            //--修改切換按鈕的圖標及標題
            this.turnAction.setIconCls('icon_chart_pie');
            this.turnAction.setText('切換爲餅狀圖');

            this.areaChart = Ext.create('Ext.chart.Chart', {
                shadow: true,
                theme: 'Base:gradients',
                animate: true,
                store: this.dataStore,
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['PV'],
                    title: 'PV',
                    grid: true
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['Name'],
                    title: strTitle
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function (storeItem, item) {
                            this.setTitle(storeItem.get('Name') + ' PV: ' + storeItem.get('PV') + ' ');
                        }
                    },
                    xField: 'Name',
                    yField: 'PV'
                }]
            });

        }
        else {
            //--修改切換按鈕的圖標及標題
            this.turnAction.setIconCls('icon_chartbar');
            this.turnAction.setText('切換爲柱狀圖');

            this.areaChart = Ext.create('Ext.chart.Chart', {
                shadow: true,
                legend: {
                    position: 'right'
                },
                animate: true,
                //insetPadding: 60,
                theme: 'Base:gradients',
                store: me.dataStore,
                series: [{
                    type: 'pie',
                    angleField: 'PV',
                    showInLegend: true,

                    highlight: {
                        segment: {
                            margin: 20
                        }
                    },
                    tips: {
                        trackMouse: true,
                        renderer: function (storeItem, item) {
                            if (me.totalPV <= 0) {
                                me.dataStore.each(function (rec) {
                                    me.totalPV += storeItem.get('PV');
                                });
                            }
                            var strMsg = storeItem.get('Name') + '： ' + storeItem.get('PV') + '（' + Math.round(storeItem.get('PV') / me.totalPV * 100) + '%）';
                            this.update(strMsg);
                        }
                    },
                    label: {
                        field: 'Name',
                        display: 'rotate',
                        contrast: true,
                        font: '18px Arial'
                    }
                }]
            });
        }
        if (isRemove) {
            this.chartBox.add(this.areaChart);
        }
    }

固然，Chart圖表和下邊的詳細，所綁定的數據是同樣的。。。

=========================分隔線====================================

其餘的數據展現功能，都差很少，只是數據不同，再就是圖表類型不同，就不一一介紹了。

下一篇，說說權限控制及實現吧。