Extjs chart 丰富呈多个数据形式

界面如图：

 

web层js源代码：

//===============================================================================
// Copyright (C) 2010 XXXXXXX有限公司。版权所有。 
//===============================================================================
// 
// 文件名：ComponentCheckExceptionStatistics.js
//
// 文件描述：web层js文件，部件盘点异常统计
//
//
// 创建人：  truman

// 创建时间：2010年4月15日

// 说明：

// 修改人：  
// 修改时间：

// 修改描述：

//=============================================================================== 

//===部件盘点异常统计===//
function ComponentCheckExceptionStatisticsInfo(){
    cmptExcepStatisticsRequestWindow.show();//显示部件盘点异常统计窗口
}




//========================部件异常统计store==============================//

//==数据解析器 cmptExcepStatisticsRequestReader==//
var cmptExcepStatisticsRequestReader = new Ext.data.JsonReader({
    totalProperty: 'totalCount',
    root: 'data',
    idProperty: 'CHECK_ID'
}, [{
    name: 'ID',
    mapping: 'ID'
},{
    name: 'CHECK_ID',
    mapping: 'CHECK_ID'
}, {
    name: 'COUNT_EXCEPTION',
    mapping: 'COUNT_EXCEPTION'
}, {
    name: 'COUNT_CMPT_EXCEPTION',
    mapping: 'COUNT_CMPT_EXCEPTION'
},{
    name: 'COUNT_STUFF_EXCEPTION',
    mapping: 'COUNT_STUFF_EXCEPTION'
},{
    name: 'BEGIN_TIME',
    mapping: 'BEGIN_TIME'
}, {
    name: 'END_TIME',
    mapping: 'END_TIME'
}, {
    name: 'CHECKPLAN_TIME',
    mapping: 'CHECKPLAN_TIME'
}]);


//==代理cmptExcepStatisticsRequestProxy==//
var cmptExcepStatisticsUrlPath = '../../../Url/Warehouse/CheckWarehouse/GetComponentsCheckExceptionStatistics.aspx';// 请求的页面
var cmptExcepStatisticsRequestProxy = new Ext.data.HttpProxy({
    url: cmptExcepStatisticsUrlPath
});
//==存储器cmptExcepStatisticsStore==//
var cmptExcepStatisticsStore = new Ext.data.Store({
    reader: cmptExcepStatisticsRequestReader,
    proxy: cmptExcepStatisticsRequestProxy
});


//查询范围 开始时间
var startTimeCmptExcepStatistics = new Ext.form.DateField({
    name: 'startTimeCmptExcepStatistics',
    fieldLabel: '开始时间',
    width: 150,
    maxLength: 20,
    minLength: 1,
    format: 'Y-m-d',//2010-01-01格式固定，y-m-d:10-01-01
    readOnly: false,
    emptyText: nowDate,
    allowBlank: false,
    blankText: '请输入开始时间'
});
//查询范围 结束时间
var endTimeCmptExcepStatistics = new Ext.form.DateField({
    name: 'endTimeCmptExcepStatistics',
    fieldLabel: '结束时间',
    width: 150,
    maxLength: 20,
    minLength: 1,
    format: 'Y-m-d',//2010-01-01格式固定，y-m-d:10-01-01
    readOnly: false,
    emptyText: nowDate,
    allowBlank: false,
    blankText: '请输入结束时间'
});

//盘点异常统计 查询按钮定义
var btnSearchOfcmptExcepStatistics = new Ext.Button({
    id: 'btnSearchOfcmptExcepStatistics',
    text: '盘点异常统计'
});

//读取所有异常 
cmptExcepStatisticsStore.load({
    params: {
        startTime: "1900-01-01",
        endTime: "2999-01-01"
    }
});

//btnSearchOfcmptExcepStatistics查询统计按钮 单击事件
btnSearchOfcmptExcepStatistics.on("click", function(){
    var startTimeValue = startTimeCmptExcepStatistics.getValue();
    var endTimeValue = endTimeCmptExcepStatistics.getValue();
    
    //如果时间范围都选择的话
    if (IsDateFieldNull(startTimeValue) && IsDateFieldNull(endTimeValue)) {
        var startTime = startTimeCmptExcepStatistics.formatDate(startTimeValue, 'yyyy-mm-dd');
        var endTime = endTimeCmptExcepStatistics.formatDate(endTimeValue, 'yyyy-mm-dd');
        cmptExcepStatisticsStore.load({
            params: {
                startTime: startTime,
                endTime: endTime
            }
        });
    }
    else {
        Ext.Msg.show({
            title: '提示',
            msg: '请选择盘点统计时间范围!',
            buttons: Ext.Msg.OK,
            animEl: 'elId',
            width: 200,
            icon: Ext.MessageBox.QUESTION
        });
    }
});



//==盘点异常统计FormPanel==//    
var cmptExcepStatisticsStorePanel = new Ext.FormPanel({
    width: 700,
    height: 400,
    title: '盘点异常统计',
    tbar: ["开始时间：", startTimeCmptExcepStatistics, " ", "结束时间：", endTimeCmptExcepStatistics, " ", btnSearchOfcmptExcepStatistics],
    items: {
        xtype: 'columnchart',
        store: cmptExcepStatisticsStore,
        xField: 'ID',
        //提示字符串
        tipRenderer: function(chart, record, index, series){
            if(series.yField == 'COUNT_EXCEPTION')
                return '盘点单ID：' + record.data.CHECK_ID + ' \n总异常数目： ' + record.data.COUNT_EXCEPTION + '\n盘点制定时间：' 
                + record.data.CHECKPLAN_TIME+'\n盘点开始时间：' + record.data.BEGIN_TIME+'\n盘点结束时间：' + record.data.END_TIME;
            else if(series.yField == 'COUNT_CMPT_EXCEPTION')
                return '盘点单ID：' + record.data.CHECK_ID + ' \n部件异常数目： ' + record.data.COUNT_CMPT_EXCEPTION ;
            else if(series.yField == 'COUNT_STUFF_EXCEPTION')
                return '盘点单ID：' + record.data.CHECK_ID + ' \n耗材工具异常数目： ' + record.data.COUNT_STUFF_EXCEPTION ;
        },
        xAxis: new Ext.chart.CategoryAxis({
            title: '盘点单'            
        }),
        yAxis: new Ext.chart.NumericAxis({
            title: '异常数目'
        }),
        series: [{
                type: 'column',
                displayName: '异常总数',
                yField: 'COUNT_EXCEPTION',
                style: {
                    image:'bar.gif',
                    mode: 'stretch'
                }
            },{
                type:'line',
                displayName: '部件异常数',
                yField: 'COUNT_CMPT_EXCEPTION',
                style: {
                    color: '#FFA928'
                }
            },{
                type:'line',
                displayName: '耗材工具异常数',
                yField: 'COUNT_STUFF_EXCEPTION',
                style: {
                    color: 0x15428B
                }
            }],
        extraStyle: {
            xAxis: {
                labelRotation: 0//x轴标题旋转度数
            },
            yAxis: {
                labelRotation: 0//y轴标题旋转度数
            }
        }
    }
});

// ===部件盘点异常统计Window===//
var cmptExcepStatisticsRequestWindow = new Ext.Window({
    name: 'cmptExcepStatisticsRequestWindow',
    title: '历史盘点异常统计',
    layout: 'fit',
    width: 600,
    height: 400,
    modal: true,
    closeAction: 'hide',
    resizable: false,
    
    items: [cmptExcepStatisticsStorePanel],
    listeners: {
        'beforehide': function(){
            cmptExcepStatisticsStorePanel.getForm().reset();
        }
    }
});

//==判断选择的时间范围是否为空==//
function IsDateFieldNull(value){

    if (value != null && value != "") {
        return true;
    }
    else {
        return false;
    }
}

 

web层 URL获取数据代码

//===============================================================================
// Copyright (C) 2010 XXXX有限公司。版权所有。 
//===============================================================================
// 
// 文件名：GetComponentsCheckExceptionStatistics.aspx.cs
//
// 文件描述：Url，部件盘点历史盘点异常数目统计
//
//
// 创建人：  truman
// 创建时间：2010年4月16日
//
// 修改人：  
// 修改时间：
// 修改描述：
//===============================================================================
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using BusinessEntity.WarehouseItem.CheckWarehouse;

namespace AfcMaintenanceSystem.Url.Warehouse.CheckWarehouse
{
    public partial class GetComponentsCheckExceptionStatistics : System.Web.UI.Page
    {
        private BeCheckDetail beCheckDetail = new BeCheckDetail();
        public string JSON = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            GetComponentsCheckExceptionStatisticsInfo();
        }
        /// <summary>
        /// 获取统计部件历史盘点异常数目
        /// </summary>
        public void GetComponentsCheckExceptionStatisticsInfo()
        {
            ////获得前台store传来的参数      
            //string limits = Request.Params["limit"];
            //string starts = Request.Params["start"];
            ////盘点单ID
            //string CHECK_ID = Request.Params["CHECK_ID"].ToString();
            DateTime startTime = new DateTime();
            DateTime endTime = new DateTime();
            if (Request.Params["startTime"] != null && Request.Params["startTime"] != "")//""是为有参数，但无值，null是判断无此参数
            {
                startTime = DateTime.Parse(Request.Params["startTime"].ToString());                
            }
            if (Request.Params["endTime"] != null && Request.Params["startTime"] != "")
            {
                endTime = DateTime.Parse(Request.Params["endTime"].ToString());
            }
            //如果时间未赋值 0001-1-1
            if (startTime.Year != 1 && endTime.Year != 1)
            {
                try
                {
                    //获取从startTime到endTime之间的历史盘点异常数目 
                    JSON = beCheckDetail.GetJsonComponentsCheckExceptionStatistics(startTime, endTime);
                }
                catch (Exception ex)
                {
                    Response.Write("{success:false,errors:{info: '错误了，后台获取统计盘点异常数据!'}}");
                    throw (ex);
                }
            }
            else
            {
                Response.Write("{success:false,errors:{info: '没有选择统计盘点时间范围!'}}");
            }
        }
    }
}

 

 业务层 源代码

/// <summary>
        /// 获得部件盘点异常统计
        /// </summary>
        /// <param name="startTime">查询盘点范围 开始日期</param>
        /// <param name="endTime">查询盘点范围 结束日期</param>
        /// <returns></returns>
        public string GetJsonComponentsCheckExceptionStatistics(DateTime startTime, DateTime endTime)
        {
            string jsonString = "";
            //Json字符串方法类
            JSONHelper json = new JSONHelper();
            json.Success = true;
            DataSet ds = null;
            int i = 1;//盘点单临时序号用
            int countCmptException = 0;
            int countStuffException = 0;
            try
            {
                //获得盘点单历史异常记录
                ds = Query(startTime, endTime);
            }
            catch (Exception ex)
            {
                throw (ex);
            }
            //将每一行的每一列的列名和对应的值放倒一个数组中，每一行以<BR>结束
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                string CHECK_ID = dr["CHECK_ID"].ToString();
                countCmptException = GetCount(" check_id = " + CHECK_ID + " and sequence_no is not null  and store_amount != sys_amount ");//该盘点单所有异常
                countStuffException = GetCount(" check_id = " + CHECK_ID + " and sequence_no is null and store_amount != sys_amount ");//该盘点单所有异常

                json.AddItem("ID", i++);//盘点单临时序号
                json.AddItem("CHECK_ID", CHECK_ID);//盘点单ID
                json.AddItem("COUNT_EXCEPTION",int.Parse(dr["COUNT_EXCEPTION"].ToString()));//盘点历史异常总记录数目 必须转换成整型，前台的chart表才能显示正确。
                json.AddItem("COUNT_CMPT_EXCEPTION", countCmptException);//盘点历史异常部件记录数目 必须转换成整型，前台的chart表才能显示正确。
                json.AddItem("COUNT_STUFF_EXCEPTION", countStuffException);//盘点历史异常耗材工具记录 必须转换成整型，前台的chart表才能显示正确。
                if (dr["BEGIN_TIME"].ToString() != "")
                    json.AddItem("BEGIN_TIME", ((DateTime)dr["BEGIN_TIME"]).ToString("yyyy-MM-dd"));//盘点开始时间
                else
                    json.AddItem("BEGIN_TIME", "");
                if (dr["END_TIME"].ToString() != "")
                    json.AddItem("END_TIME", ((DateTime)dr["END_TIME"]).ToString("yyyy-MM-dd"));//盘点结束时间
                else
                    json.AddItem("END_TIME", "");
                if (dr["CHECKPLAN_TIME"].ToString() != "")
                    json.AddItem("CHECKPLAN_TIME", ((DateTime)dr["CHECKPLAN_TIME"]).ToString("yyyy-MM-dd"));//盘点制定时间
                else
                    json.AddItem("CHECKPLAN_TIME", "");


                json.ItemOk();
            }

            //得到总记录数，用于分页页数
            json.TotlalCount = ds.Tables[0].Rows.Count;
            jsonString = json.ToString();
            return jsonString;
        }

 

暂未毕业，做点小项目，程序编的不是很完善，请大家原谅。

评论

2 楼 qimo601 2010-10-08  

fengshengshijie 写道

非常实用，有个问题，chart中的"异常数目"能不能竖着展示，查了半天没找到

呵呵对不起，这是我以前实习时候做的项目，现在一直没研究这方面。。
你要是知道了，也可以告诉我一声。多谢

1 楼 fengshengshijie 2010-08-04  

非常实用，有个问题，chart中的"异常数目"能不能竖着展示，查了半天没找到