前言
所谓，一图胜千言。人脑有80%的部分专门用于视觉处理。而随着数据时代的全面来临，我们自然有必要将数据转化为图形与图表。
Mbos是一个快速，稳定的云端轻应用开发平台。帮助企业快速开发移动应用，加快企业工作效率，为企业创造更多的效益。mbos移动设计器，可以在线进行界面设计，发布成移动云之家轻应用，方便开发，快捷交付！
其中，移动设计器还包含表单、列表、图表、控件等功能，支持在线js、css、服务端函数编辑。可以根据企业需要，快速定制开发轻应用。言归正传，下面介绍一下，在项目中，使用mbos图表功能做的财务预警轻应用中的一个图表化模块。
下面先上一个效果图：
动态参数-枚举控件
这里的每个枚举控件，都在属性中进行设置，绑定枚举数据源。这里因为选项都较为固定，因此可采用自定义枚举数据源，进行手动维护。
枚举控件设计的逻辑思维
例如上面的枚举控件中，企业与国资委对标值进行比对，企业状态分为三种：正常、关注、重点关注，而且状态相对固定，因此这块可以使用自定义枚举数据源。年份以及起始月，结束月还有预警指标（固定）同样的可以采用自定义枚举数据源进行维护。而公司这块，因为需要跟随 选择的状态的不同，需要在公司这个枚举控件的下拉框中显示 该状态对应的公司。因此需要写服务端函数进行 传递状态值 获取公司，然后将获得的公司列表赋值给公司这个枚举控件。
控件-数据源
选着好数据源，例如函数数据源，定义好数据源，然后编写服务端函数，绑定到该数据源上即可。
下面给出服务端函数 getComByStatus code:
传递参数： 通过JS的页面加载事件中参数赋值，传递给该服务端函数。 然后服务端函数及西宁获取传递的参数，进行条件查询。
var newStatus = "关注";
var newYear = "2017";
var newMon = "4";
// newStatus,newYear,newMon
// mbos('selCompany').open();
mbos("dsScript1").refresh();
mbos('dsScriptCom').setParam({newStatus,newYear,newMon});
// var adc;
// var status = @{varStatus};
var status = context.getParamAsString(0);
var year = context.getParamAsString(1);
var month = context.getParamAsString(2);
// adc = "123";
var sbSQL = new java.lang.StringBuffer();
sbSQL.append("select cfcompanyName from CT_FIN_RiskItem where 1=1");
sbSQL.append(" and cfflag = 1");
sbSQL.append(" and cfyear = " + year);
sbSQL.append(" and cfmonth = " + month);
sbSQL.append(" and cfstatus = " + "'"+status+"'");
sbSQL.append(" order by cfsortnum");
var list = context.getDBUtil().executeQueryAsList(sbSQL.toString());
var list2 = new java.util.ArrayList();
for(var i = 0; i < list.size(); i++){
var ob = new java.util.HashMap();
var bb;
var companyName = list.get(i).toString();
bb= companyName.substring(15,companyName.length()-1);
ob.put("alias",bb);
// ob.put("isenum",true);
ob.put("value",bb);
list2.add(ob);
}
// throw list2;
// throw companyName;
context.setResult(list2);
图表-折线图
在控件中选择折线图，然后给折线图绑定函数数据源，在给函数数据源绑定服务端函数，只需要编辑服务端函数即可。图表的一般都需要结合服务端变量，根据服务端变量值的改变，实现图表动态刷新。
折线图所有的函数数据源绑定的服务端函数 getData code:
/*Codeing**/
// var ctx = context.getBosContext();
var list22;
var obj1;
var obj2;
var obj3;
var obj4;
//获取服务端变量值
var year = @{varYear}; list22 = new java.util.ArrayList();
var monStart = @{varMonStart};
obj1 = new java.util.HashMap(); var monEnd =@{varMonEnd};
obj2 = new java.util.HashMap();
var companyName = @{varCompanyName};
obj3 = new java.util.HashMap();
var item =@{varItem}; obj4 = new java.util.HashMap();
//组装主查询sql
var sb = new java.lang.StringBuffer();
sb.append(" select ");
sb.append(" cfmonth as 月份, ");
if(item == "营业利润"){
sb.append(" CT_FIN_SasacEntry.cfpoor as 平均值, ");
sb.append(" CT_FIN_SasacEntry.cfaverage as 较差值, ");
}else{
sb.append(" CT_FIN_SasacEntry.cfpoor/100 as 平均值, ");
sb.append(" CT_FIN_SasacEntry.cfaverage/100 as 较差值, ");
} if(item == "资产负债率"){
sb.append(" round(cftotalLiabilites/cftotalAssets,4) as 企业数据 ");
}else if(item == "营业利润"){
sb.append(" round(cftrafficProfit/10000,4) as 企业数据 ");
}else if(item == "己获利息倍数"){
sb.append(" round((cftotalProfit+cfinterestExpense)/cfinterestExpense,4) as 企业数据 ");
}else if(item == "流动比率"){
sb.append(" round(cfcurrentAssets/cfcurrentLiabilities,4) as 企业数据 ");
}else if(item == "两金占流动资产比重"){
sb.append(" round((cfaccountReceivable+cfstock)/cfcurrentAssets,4) as 企业数据 ");
}else if(item == "速动比率"){
sb.append(" round((cfcurrentAssets-cfstock)/cfcurrentLiabilities,4) as 企业数据 ");
}else if(item == "现金流动负债比率"){
sb.append(" round(cfoperaCashFlow/cfcurrentLiabilities,4) as 企业数据 ");
}else if(item == "带息负债比率"){
sb.append(" round((cfshortLoan+CFOneYearLongLiabilities+cflongLoan+CFBondsPayable+CFInterestPayable)/cftotalLiabilites,4) as 企业数据 ");
}else if(item == "或有负债比率"){
sb.append(" round((CFDraft+CFBalance+CFAmountOfmatter+CFContingentLiabilities)/cfownerRights,4) as 企业数据 ");
}else if(item == "平均融资成本率"){
sb.append(" round(CFTotalCosts/CFFinancingCost,4) as 企业数据 ");
}
//组装表 条件查询
sb.append(" from CT_FIN_RiskItem as CT_FIN_RiskItem ");
sb.append(" INNER join CT_FIN_Sasac as CT_FIN_Sasac on CT_FIN_RiskItem.cfyear = CT_FIN_Sasac.cfyear ");
sb.append(" INNER join CT_FIN_SasacEntry as CT_FIN_SasacEntry on CT_FIN_Sasac.fid = CT_FIN_SasacEntry.fparentid ");
sb.append(" where CT_FIN_RiskItem.cfyear = " + year);
sb.append(" and CT_FIN_RiskItem.cfcompanyName = " +"'"+ companyName+"'");
sb.append(" and CT_FIN_SasacEntry.cfname = " + "'" + item + "'");
sb.append(" and CT_FIN_RiskItem.cfmonth >= " + monStart);
sb.append(" and CT_FIN_RiskItem.cfmonth <= " + monEnd);
sb.append(" order by cfmonth"); //执行查询企业数据
var list = context.getDBUtil().executeQueryAsList(sb.toString());
if(list.toString().length()>0){
context.setResult(list);
}
// context.setResult(list);
// throw list;
控件-变量
在控件中选择变量，定义服务端变量。服务端变量 需要通过 值改变事件 进行赋值 以及初始化。(服务端变量一定在JS中进行初始化)
为每个枚举控件绑定 值改变事件。
JS端
包含 每个控件的值改变事件，将对应控件选中的值 赋值给对应的 服务端变量，并进行刷新取数数据源。借助服务端变量进行图标数据源的属性，动态图表根据选择参数的不同，取数后的数据改变，导致图表的动态刷新！控件的初始化赋值（必须要做的操作，虽然会有点影响加载性能） 在用page 绑定 afterOnload 事件（页面加载后进行）进行初始化的赋值。
_this.changeSelYear = function(event){
mbos.variable.setValue("varYear",event.new_value.alias);
mbos("dsScript1").refresh();
}
_this.changeSelectItem = function(event){
mbos.variable.setValue("varItem",event.new_value.alias);
mbos("dsScript1").refresh();
}
_this.changeStartMonth = function(event){
mbos.variable.setValue("varMonStart",event.new_value.alias);
mbos("dsScript1").refresh();
}
_this.changeEndMonth = function(event){
var endMon = event.new_value.alias;
var startMon = mbos("selectMonthStart").value().alias;
// if(endMon < startMon){
// var param = {title:"错误",msg:"请正确选择月份",timeOutFn:function(data){if(data==0){alert("确定按钮")}}};
// mbos.ui.showError(param);
// }
mbos.variable.setValue("varMonEnd",endMon);
mbos("dsScript1").refresh();
}
//预警状态 值改变
_this.changeStatus = function(event){
mbos.variable.setValue("varStatus",event.new_value.alias);
var newStatus = event.new_value.alias;
var newYear = mbos("selYear").value().alias;
var newMon = mbos("selectMonthStart").value().alias;
//刷新 获取公司函数源
mbos("dsScript1").refresh();
mbos('dsScriptCom').setParam({newStatus,newYear,newMon});
}
//selCompany
_this.changeCompany = function(event){
mbos.variable.setValue("varCompanyName",event.new_value.alias);
mbos("dsScript1").refresh();
}
//页面加载后初始化
mbos('page').bind("afterOnload",function(){
//设置初始值 每个都要有初始值..顺便给控件赋初始值
mbos.variable.setValue("varYear",'2017');
mbos.variable.setValue("varItem",'资产负债率');
mbos.variable.setValue("varMonStart",'4');
mbos.variable.setValue("varMonEnd",'5');
mbos.variable.setValue("varStatus",'关注');
// mbos.variable.setValue("varCompanyName",'百利装备');
// debugger;
//组织隔离
var company = easContext[0].name;
if(company =="天津百利机械装备集团有限公司"){
mbos.variable.setValue("varCompanyName",'百利装备');
mbos('selCompany').value({
alias: "百利装备",
isenum: true,
value: "百利装备"
});
}else{
//禁用枚举 公司 和状态控件
mbos('selCompany').disable();
mbos('selStatus').disable();
// mbos('selStatus').remove();
// 赋值公司值为 当前组织公司
mbos.variable.setValue("varCompanyName",company);
mbos('selCompany').value({
alias:company,
isenum: true,
value: company
});
}
mbos('selYear').value({
alias: "2017",
isenum: true,
value: "2017"
});
mbos('selectItem').value({
alias: "资产负债率",
isenum: true,
value: "资产负债率"
});
mbos('selectMonthStart').value({
alias: "4",
isenum: true,
value: "4"
});
mbos('selectMonthEnd').value({
alias: "5",
isenum: true,
value: "5"
});
// mbos('selStatus').value({
// alias: "关注",
// isenum: true,
// value: "关注"
// });
// mbos('selCompany').value({
// alias: "百利装备",
// isenum: true,
// value: "百利装备"
// });
var newStatus = "关注";
var newYear = "2017";
var newMon = "4";
// newStatus,newYear,newMon
// mbos('selCompany').open();
mbos("dsScript1").refresh();
mbos('dsScriptCom').setParam({newStatus,newYear,newMon});
})
至此，图表制作的步骤就介绍完毕了，多参考开发文档：https://mbos.kingdee.com/doc/index.html