注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

EXT 3.4 chart  

2012-12-19 15:53:43|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
EXT 3.4 chart - Diligent - Diligent
 
EXT 3.4 chart - Diligent - Diligent
 
EXT 3.4 chart - Diligent - Diligent
 
 


Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';

    var statStore = new Ext.data.JsonStore({
        fields: ['callee','value','duration']
    });
   
    function statChart(){
        var columnChart = new Ext.chart.ColumnChart({
            store: statStore
            ,xField: 'callee'
            ,yField: 'value'
            ,hidden: true
            ,chartStyle: {
                dataTip: {
                    padding: 3
                    ,font: {
                         family: 'Tahoma'
                        ,size: 12
                        ,bold: true
                    }
                }
            }
        });
       
        var columnChartForDuration = new Ext.chart.ColumnChart({
            store: statStore
            ,xField: 'callee'
            ,yField: 'value'
            ,hidden: true
            ,tipRenderer : function(chart, record){
                return timeRender(record.data.value);
            }
            ,yAxis: new Ext.chart.NumericAxis({
                displayName: 'value'
                ,labelRenderer: timeRender
            })
            ,chartStyle: {
                dataTip: {
                    padding: 3
                    ,font: {
                         family: 'Tahoma'
                        ,size: 12
                        ,bold: true
                    }
                }
            }
        });
       
        var pieChart = new Ext.chart.PieChart({
            xtype: 'piechart'
            ,columnWidth: 1
            ,store: statStore
            ,dataField: 'value'
            ,categoryField: 'callee'
            ,hidden: true
            ,chartStyle: {
                legend: {
                    display: 'top'
                    ,padding: 5
                    ,font: {
                         family: 'Tahoma'
                         ,size: 14
                    }
                }
                ,dataTip: {
                    padding: 5
                    ,font: {
                        family: 'Tahoma'
                        ,size: 12
                        ,bold: true
                    }
                }
            }
        });
       
        var pieChartForDuration = new Ext.chart.PieChart({
            xtype: 'piechart'
            ,columnWidth: 1
            ,store: statStore
            ,dataField: 'value'
            ,categoryField: 'callee'
            ,hidden: true
            ,tipRenderer : function(chart, record){
                var total = 0;
                statStore.each(function(rec) {
                    total += Number(rec.get('value'));
                });
                return record.get('callee')
                    + ' ' + timeRender(record.get('value')) + ' ' + Math.round(record.get('value') / total * 100) + '%';
            }
            ,chartStyle: {
                legend: {
                    display: 'top'
                    ,padding: 5
                    ,font: {
                         family: 'Tahoma'
                         ,size: 14
                    }
                }
                ,dataTip: {
                    padding: 5
                    ,font: {
                        family: 'Tahoma'
                        ,size: 12
                        ,bold: true
                    }
                }
            }
        });
       
        var lineChart = new Ext.chart.LineChart({
            store: statStore
            ,xField: 'callee'
            ,yField: 'value'
            ,hidden: true
            ,chartStyle: {
                 dataTip: {
                    padding: 3
                    ,font: {
                         family: 'Tahoma'
                        ,size: 12
                        ,bold: true
                    }
                 }
           }
        });
       
        var lineChartForDuration = new Ext.chart.LineChart({
            store: statStore
            ,xField: 'callee'
            ,yField: 'value'
            ,hidden: true
            ,tipRenderer : function(chart, record){
                return timeRender(record.data.value);
            }
            ,yAxis: new Ext.chart.NumericAxis({
                displayName: 'value'
                ,labelRenderer: timeRender
            })
            ,chartStyle: {
                 dataTip: {
                    padding: 3
                    ,font: {
                         family: 'Tahoma'
                        ,size: 12
                        ,bold: true
                    }
                 }
           }
        });
       
        var xLabel = new Ext.form.DisplayField({
            html: ''
            ,hidden: true
        });
        var yPanel = new Ext.Panel({
            region: 'west'
            ,width: 30
            ,bodyStyle: 'padding: 10px;height: 100%;'
            ,border: false
            ,html: ''
            ,hidden: true
        });
       
        var statWin = new Ext.Window({
            modal: true
            ,title: '人工话务统计图'
            ,width: 748
            ,height: 540
            ,layout: 'border'
            ,autoScroll: true
            ,bodyStyle: 'padding: 2px;background: white;'
            ,items: [yPanel,{
                region: 'center'
                ,border: false
                ,items: [columnChart,columnChartForDuration,pieChart,pieChartForDuration,lineChart,lineChartForDuration]
            },{
                region: 'south'
                ,items: xLabel
                ,border: false
                ,height: 26
            }]
            ,buttonAlign: 'center'
            ,tbar: {
                style: 'padding: 4px 2px 4px 6px;'
                ,items: [{
                    xtype: 'label'
                    ,html: '起始时间'
                },{
                    width: 144
                    ,xtype: 'datefield'
                    ,style: 'padding: 2px;'
                    ,altFormats: 'Y-m-d H:i:s'
                    ,format: 'Y-m-d H:i:s'
                    ,name: 'datestart'
                },{
                    xtype: 'tbspacer',width: 10},{
                    xtype: 'label'
                    ,html: '截止时间'
                },{
                    width: 144
                    ,xtype: 'datefield'
                    ,style: 'padding: 2px;'
                    ,altFormats: 'Y-m-d H:i:s'
                    ,format: 'Y-m-d H:i:s'
                    ,name: 'datestart'
                },{
                    xtype: 'tbspacer',width: 10},{
                    xtype: 'label'
                    ,html: '显示模式'
                },{
                    fieldLabel: '显示模式'
                    ,xtype: 'combo'
                    ,store: new Ext.data.SimpleStore({  
                        fields: ['key', 'value']  
                        ,data: [['0','柱状图'],['1','饼图'],['2','线形图']]
                    }) 
                      ,valueField: 'key'
                      ,displayField: 'value'
                      ,forceSelection: true
                    ,selectOnFocus: true
                    ,editable: false
                    ,typeAhead: true
                    ,mode: 'local'
                    ,triggerAction: 'all'
                    ,width: 76
                    ,value: '0'
                },{xtype: 'tbspacer',width: 10},{
                    xtype: 'label'
                    ,html: '统计类别'
                },{
                    fieldLabel: '统计类别'
                    ,xtype: 'combo'
                    ,store: new Ext.data.SimpleStore({  
                        fields: ['key', 'value']  
                        ,data: [['count','总次数'],['duration','总时间']]
                    })
                    ,valueField: 'key'
                    ,displayField: 'value'
                    ,forceSelection: true
                    ,selectOnFocus: true
                    ,editable: false
                    ,typeAhead: true
                    ,mode: 'local'
                    ,triggerAction: 'all'
                    ,width: 76
                    ,value: 'count'
                },{xtype: 'tbspacer',width: 10},{
                    xtype: 'button'
                    ,text: colorText('统计','crimson',true)
                    ,iconCls: 'statistics'
                    ,handler: function(){
//                        statStore.removeAll();
                   
                        var fromField = statWin.getTopToolbar().items.itemAt(1);
                        var toField = statWin.getTopToolbar().items.itemAt(4);
                       
                        if(!fromField.isValid() || !toField.isValid()){
                            Ext.Msg.alert('提示','起始/截止时间格式不正确!');
                            return;
                        }
                   
                        var mode = statWin.getTopToolbar().items.itemAt(7).getValue();
                        var f = getDateStringWithNormalDate(statWin.getTopToolbar().items.itemAt(1).getRawValue());
                        var t = getDateStringWithNormalDate(statWin.getTopToolbar().items.itemAt(4).getRawValue());
                        var type = statWin.getTopToolbar().items.itemAt(10).getValue();
                       
                        var fromTime = (f.length > 5 ? (Date.parse(f) / 1000) : '');
                        var toTime = (t.length > 5 ? (Date.parse(t) / 1000) : '');

                        Ext.Ajax.request({
                            url: 'call_stat.php?do=chart&f='
                                + fromTime + '&t=' + toTime + '&type=' + type
                            ,success: function(response,options){
                                var ret = Ext.decode(response.responseText);
                                if(ret.success){
                                    if(!ret.data.length){
                                        columnChart.setVisible(false);
                                        columnChartForDuration.setVisible(false);
                                        pieChart.setVisible(false);
                                        pieChartForDuration.setVisible(false);
                                        lineChart.setVisible(false);
                                        lineChartForDuration.setVisible(false);
                                        xLabel.hide ();
                                        yPanel.hide ();
                                        Ext.Msg.alert('提示', "当前条件下没有任何数据,无法统计");
                                        return;
                                    }
                                   
                                    switch(mode){
                                        case '0':
                                            if(type == 'duration'){
                                                setTitle(yPanel,'总时间');
                                                columnChartForDuration.setVisible(true);
                                                columnChart.setVisible(false);
                                            }else{
                                                setTitle(yPanel,'总次数');
                                                columnChart.setVisible(true);
                                                columnChartForDuration.setVisible(false);
                                            }
                                            setTitle(xLabel,'坐席',true);
                                            pieChart.setVisible(false);
                                            pieChartForDuration.setVisible(false);
                                            lineChart.setVisible(false);
                                            lineChartForDuration.setVisible(false);
                                            break;
                                        case '1':
                                            yPanel.hide();
                                            if(type == 'duration'){
                                                pieChartForDuration.setVisible(true);
                                                pieChart.setVisible(false);
                                            }else{
                                                pieChart.setVisible(true);
                                                pieChartForDuration.setVisible(false);
                                            }
                                            columnChart.setVisible(false);
                                            columnChartForDuration.setVisible(false);
                                            lineChart.setVisible(false);
                                            lineChartForDuration.setVisible(false);
                                            break;
                                        case '2':
                                            if(type == 'duration'){
                                                setTitle(yPanel,'总时间');
                                                lineChartForDuration.setVisible(true);
                                                lineChart.setVisible(false);
                                            }else{
                                                setTitle(yPanel,'总次数');
                                                lineChart.setVisible(true);
                                                lineChartForDuration.setVisible(false);
                                            }
                                            setTitle(xLabel,'坐席',true);
                                            columnChart.setVisible(false);
                                            columnChartForDuration.setVisible(false);
                                            pieChart.setVisible(false);
                                            pieChartForDuration.setVisible(false);
                                            break;
                                    }
                                    if(mode == '1'){
                                        var total = 0;
                                        for(var i = 0;i < ret.data.length;i++){
                                            total += Number(ret.data[i].value);
                                        }
                                        if(type == 'duration'){
                                            setTitle(xLabel,'坐席 --- 总时间 (' + timeRender(total) + ')',true);
                                        }else{
                                            setTitle(xLabel,'坐席 --- 总次数 (' + total + '次)',true);
                                        }
                                    }
                                    xLabel.show();
                                    statWin.doLayout();
                                    statStore.loadData(ret.data);
                                }
                            }
                        });
                    }
                }]
            }
            ,buttons: [{
                text: '关闭'
                ,iconCls: 'close_btn'
                ,handler: function(){
                    statWin.close();
                }
            }]
        });
       
        statWin.show();
    }
   
    function setTitle(label,title,x){
        label.show();
        if(arguments.length == 3){
            label.update('<div style="text-align:center;color: black;font-weight: bold;">' + title + '</div>');
        }else{
            label.update('<table style="height: 100%;vertical-align: middle;100%;color: black;font-weight: bold;">'
                + '<tr><td style="">' + title + '</td></tr></table>');
        }
    }
  评论这张
 
阅读(2092)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017