ExtJs_chart_columnchart示例完整版

最新推荐文章于 2020-03-02 13:37:40 发布

cenyebao

最新推荐文章于 2020-03-02 13:37:40 发布

阅读量6.1k

点赞数

分类专栏： 23JS_ExtJs 文章标签： extjs function json border layout url

本文链接：https://blog.csdn.net/cenyebao/article/details/6192090

版权

23JS_ExtJs 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

/**-打印日志start-*/
Ext.namespace("A");
isDebug = true;
/**
* 日志调式
*
* 使用方法 log("blabla: {0}, blabla: {1}", obj0, obj1)
*
* @param {} format     //格式。
*/
A.log = function(format){
    if(!isDebug){ return; } // 只在debug下用
    try{
        if(arguments.length < 2){ // 直接打印
            console.log(format);
        } else {
            var params = Array.prototype.slice.call(arguments, 1), ps = [format];
            Ext.each(params, function(obj){
                ps.push(obj.filterOptRe ? "[EXT控件, " + obj.getXType() + "]" : Ext.encode(obj)); // ext 控件,不打印,避免内存溢出
            });
            console.log(String.format.apply(window, ps));
        }
    }catch(e){} //忽略错误,可能是在IE下或是生产环境下
}
/**-打印日志end-*/

/**引入FLASH文件*/
Ext.chart.Chart.CHART_URL='charts.swf';

/**命名空间*/
Ext.ns("App.chart");

/**程序入口*/
Ext.onReady(function(){
    new App.chart.bzfcolumnchart();    //特别提醒：要用这种格式new哦！
});

App.chart.bzfcolumnchart = Ext.extend(Ext.Panel, {
    title:"2011-2012学年学生标准分成绩柱形图end_ok?",
    frame:true,
    iconCls:"chart",
    renderTo:Ext.getBody(),
    width:700,
    height:300,
    layout:'fit',
    /**初始化组件*/
    initComponent:function(){
        Ext.apply(this,{
            items:[{
                xtype:'columnchart',
                store:this.getStore(),
                xField:'ksmc',
                url:'charts.swf',
                series:this.getSeries(),
                chartStyle:this.chartStyle
            }]
        });
        App.chart.bzfcolumnchart.superclass.initComponent.call(this);
    },

    /**原始数据*/
    getchartDatas:function(){
        var data=[
            {
                "ysf":93,
                "ksmc":"2011-2012学年度上学期高一年级期中考试",
                "bzf":481.025199206007,
                "bjmc":"111",
                "tglv":" ",
                "ksrq":"2011-11-07"
            },{
                "ysf":95.2923076923077,
                "ksmc":"2011-2012学年度上学期高一年级期末考试",
                "bzf":500.334870366218,
                "bjmc":"111",
                "tglv":"4.0143%",
                "ksrq":"2012-02-05"
            },{
                "ysf":97.0820512820513,
                "ksmc":"2011-2012学年度上学期高一年级期中考试",
                "bzf":515.100108417183,
                "bjmc":"112",
                "tglv":" ",
                "ksrq":"2011-11-07"
            },{
                "ysf":95.0461538461539,
                "ksmc":"2011-2012学年度上学期高一年级期末考试",
                "bzf":495.658860100003,
                "bjmc":"112",
                "tglv":"-3.7743%",
                "ksrq":"2012-02-05"
            },{
                "ysf":95.7333333333333,
                "ksmc":"2011-2012学年度上学期高一年级期中考试",
                "bzf":503.87469237681,
                "bjmc":"113",
                "tglv":" ",
                "ksrq":"2011-11-07"
            },{
                "ysf":95.5641025641026,
                "ksmc":"2011-2012学年度上学期高一年级期末考试",
                "bzf":504.006269533779,
                "bjmc":"113",
                "tglv":"0.0261%",
                "ksrq":"2012-02-05"
            },{
                "ysf":97.7333333333333,
                "ksmc":"2011-2012学年度上学期高一年级期中考试",
                "bzf":603.87469237681,
                "bjmc":"114",
                "tglv":" ",
                "ksrq":"2011-11-07"
            },{
                "ysf":99.5641025641026,
                "ksmc":"2011-2012学年度上学期高一年级期末考试",
                "bzf":684.006269533779,
                "bjmc":"114",
                "tglv":"0.0261%",
                "ksrq":"2012-02-05"
            },{
                "ysf":80.7333333333333,
                "ksmc":"2011-2012学年度上学期高一年级期中考试",
                "bzf":303.87469237681,
                "bjmc":"115",
                "tglv":" ",
                "ksrq":"2011-11-07"
            },{
                "ysf":79.5641025641026,
                "ksmc":"2011-2012学年度上学期高一年级期末考试",
                "bzf":284.006269533779,
                "bjmc":"115",
                "tglv":"0.0261%",
                "ksrq":"2012-02-05"
            }
        ];
        return data;
    },

    /**
    * 功能：判断是否已经存在ksmc，既是否已有同名考试名称。
    * @param {} newdatas    放组装好的数据数组。
    * @param {} ksmc    考试名称。
    * @return 不存在返回-1；存在为，则返回下标序号。
    */
    getksmcIndex:function(newdatas,ksmc){
        for(var i=0,size=newdatas.length;i<size;i++)
        {
            if(newdatas[i]["ksmc"]==ksmc)
            {
                return i;
            }
        }
        return -1;
    },

    /**
    * 功能：组装数据。
    * 思路：拿到数据->循环数据，取出ksmc进行判断->根据ksmc组装数据。
    * @return {}
    */
    dosomething:function(){
        var olddatas=this.getchartDatas();    //拿到原始数据。
        var newdatas=[];    //用于存放新数据数组。
        var j=0;
        for(var i=0,size=olddatas.length;i<size;i++)
        {//循环读取数据。
            var ksmc=olddatas[i]["ksmc"];    //得到考试名称。
            var index=this.getksmcIndex(newdatas,ksmc);        //判断考试名称在新数据数组中是否已经存在，如存在则返回其下标。
            if(index==-1)
            {//考试名称不存在。
                newdatas[j]={"ksmc":ksmc};    //注意：Json对象是这样添加的。
                newdatas[j][String.format("bzf{0}",olddatas[i]["bjmc"])]=olddatas[i]["bzf"];    //添加Json对象。注意它是一个无序的“‘名称/值’对”集合
                j++    //自增1，以用于添加不同考试名称。
            }else{
                newdatas[index][String.format("bzf{0}",olddatas[i]["bjmc"])]=olddatas[i]["bzf"];
            }
        }

        /**调试：打印输出newdatas*//*
        Ext.each(newdatas,function(d){
            for(var p in d)
            {
                alert(p+":"+d[p]);
            }
            alert("---a---b---c---");
        })
        alert("组装好的数据长度：" + newdatas.length);*/

        return newdatas;
    },

    /**获取store的fields
    * 注意：要根据新数据数组循环以得到其字段名称。
    * */
    getStoreFields:function(){
        var newdatas=this.dosomething();    //解释：得到组装好的数据。

        //说明：循环取得store里的fields字段。
        var storeFields=[];
        if(newdatas.length>0)
        {
            Ext.each(newdatas[0],function(d){
                for(var f in d)
                {
                    storeFields.push(f);
                }
            })
        }
        //打印日记：
        A.log("storeFields数据为:{0}",storeFields);    //???为什么不显示？？？
        return storeFields;
    },

    /**获取series*/
    getSeries:function(){
        var newdatas=this.dosomething();//解释：得到组装好的数据
        var seriesSjz=[];
        if(newdatas.length>0)
        {
            for(var s in newdatas[0])
            {
                if(s!="ksmc")
                {
                    seriesSjz.push({
                        displayName: s.substring(3)+"班",    //特别提醒：可通过string的substring(start,end)来剪切字符串。
                        yField: s,
                        style: {
                            mode: 'stretch'
                        }
                    });
                }
            }
        }

        A.log("series里yField的值数组为：{0}",seriesSjz)

        return seriesSjz;
    },

    /**获取store*/
    getStore:function(){
        var store=new Ext.data.JsonStore({
            fields:this.getStoreFields(),    //解释：直接引用。
            //fields:['ksmc','bzf111','bzf112','bzf113'],
            data:this.dosomething()
            //data:this.getDatas()
        });
        return store;
    },

    /**提醒：组装好的store数据data格式*//*
    getDatas:function(){
        var data=[
                {"ksmc":"2011-2012学年度上学期高一年级期中考试",
                "bzf111":481.025199206007,
                "bzf112":515.100108417183,
                "bzf113":503.87469237681},

                {"ksmc":"2011-2012学年度上学期高一年级期末考试",
                "bzf111":500.334870366218,
                "bzf112":495.658860100003,
                "bzf113":504.006269533779}
            ];
        return data;
    },*/

    /*series:[{
            displayName: '班级11(1)',
            yField: 'bzf111',
            style: {
                mode: 'stretch',
                color: 0x15428B
            }
        }, {
            displayName: '班级11(2)',
            yField: 'bzf112',
            style: {
                mode: 'stretch',
                color: 0x99BBE8
            }
        }, {
            displayName: '班级11(3)',
            yField: "bzf113",
            style: {
                mode: 'stretch',
                color: 0xdfe8f6
            }
        }],*/
    chartStyle:{padding:10,    //填充。
            animationEnabled:true,
            legend:{    //柱形说明文字。
                display:'top',
                font:{
                    hold:true
                }
            },
            font:{    //X轴Y轴字体设置。
                name:'Tahoma',
                color:0x444444,
                size:11
            },
            dataTip:{    //提示框显示。
                padding:5,
                border:{    //边框设置。
                    color:0x99bbe8,
                    size:1
                },
                background:{
                    color:0xDAE7F6,
                    alpha:.9    //透明度。
                },
                font:{    //字体设置。
                    name:'Tahoma',
                    color:0x15428B,
                    size:10,
                    hold:true
                }
            }}
});

Ext.reg("bzfcolumnchart",App.chart.bzfcolumnchart);