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图表和下边的详细，所绑定的数据是一样的。。。

=========================分隔线====================================

其他的数据展示功能，都差不多，只是数据不一样，再就是图表类型不一样，就不一一介绍了。

下一篇，说说权限控制及实现吧。