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

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

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

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

posted @ 2014-03-12 11:12  up-Henson  阅读(2922)  评论(1编辑  收藏  举报