ExtJS13：Google Chart应用

1.加入Google Chart控件Ext.ux.GoogleChart。

(1)将Ext.ux.GoogleChart.js放置到D:\workspacemy\Ulink\web\js\core\Ext.ux.GoogleChart.js

(2)在App.import.js中加入GoogleChart控件：

2.定义页面组件，添加相关属性，进行初始化

//(1) 定义全局变量

var pieLabel = ["未执行","预约","已取消","已失败结案","已成功结案","待追踪","搁置"];

//(2) 声明饼图实例，加载数据

var pieChartPic = new Ext.ux.GoogleChart({

    chartType:"pie3d"

    , id : 'pieChartPicID'

    , width : 300

    , dataType:"extended"

    , chartColors:["ff2400", "94660e", "9B30FF","D3D3D3","FFFF00","ADFF2F","8E388E"]

// , title:"任务统计"

// , labels:["未执行","预约","已取消","已失败结案","已成功结案","待追踪","搁置"]  //标签备注

});

pieChartPic.addData("data",  YXtaskForm.getCountData(_cfg.comId));//加载数据

pieChartPic.labels =  pieLabel;//加载标签

//(3) 将组件添加到相应位置

{

columnWidth : .5,

border : false,

style : 'text-align:center',

        items:[pieChartPic]//放置实例化的组件

}

//(4) 定义方法，从后台取出统计数据

YXtaskForm.getCountData = function(comId) {

//同步请求

        //取得连接

var responsea = Ext.lib.Ajax.getConnectionObject().conn;

        

        //设置url

responsea.open("POST",  __ctxPath + '/outb/listCountsObSaletask.do?comId=' + comId, false);

        

        //发送请求

responsea.send(null);

        

        //解析数据

var result = Ext.util.JSON.decode(responsea.responseText);

        //拼装数据

var data = [result.LAY_UP,result.PLAN,result.FLOWING,result.FAIL_CASE,result.SUCC_CASE,result.NO_EXEC,result.CANCELED];

        // 赋值全局变量

pieLabel = ["未执行,"+result.NO_EXEC,"预约,"+result.PLAN,"已取消,"+result.CANCELED,"已失败结案,"+result.FAIL_CASE,"已成功结案,"+result.SUCC_CASE,"待追踪,"+result.FLOWING,"搁置,"+result.LAY_UP];

        

        // 返回拼装数组

return data;

}

3.后台数据读取

/**

 * 饼图：数据显示，各种任务等。

 */

public String listCounts() {

String comId = getRequest().getParameter("comId");

QueryFilter filter = new QueryFilter(getRequest());

HashMap<String,String> hsmp = new HashMap<String,String>();

hsmp.put("NO_EXEC",getCounts(comId, filter, ObSaletask.MARKET_NO_EXEC));filter.clearFilter();   //未执行

hsmp.put("PLAN", getCounts(comId, filter, ObSaletask.MARKET_PLAN));filter.clearFilter();   //预约

hsmp.put("CANCELED",getCounts(comId, filter, ObSaletask.MARKET_CANCELED));filter.clearFilter();  //已取消

hsmp.put("FAIL_CASE",getCounts(comId, filter, ObSaletask.MARKET_FAIL_CASE));filter.clearFilter(); //已失败结案

hsmp.put("SUCC_CASE",getCounts(comId, filter, ObSaletask.MARKET_SUCC_CASE));filter.clearFilter(); //已成功结案

hsmp.put("FLOWING",getCounts(comId, filter, ObSaletask.MARKET_FLOWING));filter.clearFilter(); //带追踪

hsmp.put("LAY_UP",getCounts(comId, filter, ObSaletask.MARKET_LAY_UP));filter.clearFilter(); //搁置

setJsonString(JsonUtil.hsmp2JSON(hsmp));

return SUCCESS;

}

/**

 * 统计数量：查询某种任务的总数量

 */

private String getCounts(String comId,QueryFilter filter,Short taskStaId) {

filter.addFilter("Q_obCom.comId_L_EQ", comId);

filter.addFilter("Q_busiStaId_SN_EQ", String.valueOf(taskStaId));

return String.valueOf(obSaletaskService.listCounts(comId, filter));

}