使用funshionchart技术总结

在最近的项目中，有个下功能要开发报表，开始使用了项目中已有的图表框架jfreechart，发现生成图片，然后建立链接，图片不好看，且页面显示效率低。

后来使用了funshionchart，主要是配置xml，用户体验好，效率也高多了。

后台主要是获取统计数据，组装成相应格式，递给前台，之前北京组的同事使用dom.jar生成xml文件，并组装数据，然后前台获取这个xml文件，这对开发人员的技术和时间要求都变得高了，也不利于解决问题。

 我是通过把生成图表的xml拼成字符串，然后直接给前台页面。

图表的xml在官方包中有很多，有各种风格，只需把官方例子中的xml拿出来，把里面的静态数据修改成动态加载数据，生成xml即可。

后台代码对数据进统计：

/**
* 显示系统概览
* @param mapping
* @param form
* @param request
* @param response
* @return  Notice
* @throws Exception
*/

public void showSysOverview(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {


StringBuffer xmlsb = new StringBuffer();
Map condition = new HashMap();
condition.put("maxresult", Integer.valueOf(10));
String defaultnum = request.getParameter("num");
String[] rowKeys = { "总数", "已完成", "待处理" };
StringBuffer allsb = new StringBuffer();
StringBuffer systemnamesb = new StringBuffer();
StringBuffer donesb = new StringBuffer();
StringBuffer undosb = new StringBuffer();
int rowkeylen = rowKeys.length;


List list = mgr.getUsersScoreList(ItsspWelcomeMethod.SYSTEMDEPT_SQL,
condition);
condition.put("maxresult", Integer.valueOf(100000));
int size = list.size();
int[] allproblem = new int[size];
String[] columnKeys = new String[size];
for (int j = 0; j < rowkeylen; j++) {
for (int i = 0; i < size; i++) {
Object[] objs = (Object[]) list.get(i);
String deptid = ItsspWelcomeMethod.getStrNotNull(objs[0]);
String deptname = ItsspWelcomeMethod.getStrNotNull(objs[1]);
columnKeys[i] = deptname;
int all = 0;
// 存放已解决问题
int done = 0;
// 存放未解决问题
int undone = 0;
if (j == 0) {
all = method.getDataSize(deptid, "");
allproblem[i] = all;
allsb.append("<set value=" + '"').append(all).append(
'"' + "/>");
systemnamesb.append("<category label=" + '"').append(
deptname).append('"' + "/>");
} else if (j == 1) {
done = method.getDataSize(deptid, " and p.problemType!=0");
donesb.append("<set value=" + '"').append(done).append(
'"' + "/>");
} else if (j == 2) {
undone = method.getDataSize(deptid, " and p.problemType=0");
undosb.append("<set value=" + '"').append(undone).append(
'"' + "/>");
}

if ("3".equals(defaultnum) && (i==3)) {
break;
}
}
}
Arrays.sort(allproblem);
int bound = allproblem[size - 1] + 1; // 总高，刻度为bound/5
xmlsb.append(
"<chart yAxisMaxValue=" + '"' + bound + '"' 
+ " staggerLines=" + '"' + 5 + '"' + " showValues=" + '"' + "1" + '"'
+ " baseFontSize=" + '"' + "13" + '"'
+ " divLineAlpha=" + '"' + "20" + '"'
+ " divLineColor=" + '"' + "64810A" + '"'
+ " divLineIsDashed=" + '"' + "1" + '"'
+ " showAlternateHGridColor=" + '"' + "1" + '"'
+ " alternateHGridAlpha=" + '"' + "5" + '"'
+ " alternateHGridColor=" + '"' + "CC3300" + '"'
+ " shadowAlpha=" + '"' + "40" + '"' + " labelStep="+ '"' + "1" + '"' 
       + " numvdivlines=" + '"' + "5" + '"'
+ " chartRightMargin=" + '"' + "35" + '"' + " bgColor="
+ '"' + "FFFFFF,CC3300" + '"' + " bgAngle=" + '"'
+ "270" + '"' + " bgAlpha=" + '"' + "10,10" + '"'
+ " >")
. append("<categories font='Arial'>").append(systemnamesb)
.append("</categories>").append(
"<dataset seriesName=" + '"' + rowKeys[0] + '"'
+ " color=" + '"' + "AFD8F8" + '"'
// + " anchorBorderColor=" + '"' + "1D8BD1" + '"'
// + " anchorBgColor=" + '"' + "1D8BD1" + '"'
+ ">").append(allsb).append("</dataset>")
.append(
"<dataset seriesName=" + '"' + rowKeys[1] + '"'
+ " color=" + '"' + "F6BD0F" + '"'
// + " anchorBorderColor=" + '"' + "F1683C" + '"'
// + " anchorBgColor=" + '"' + "F1683C" + '"'
+ ">").append(donesb).append("</dataset>")
.append(
"<dataset seriesName=" + '"' + rowKeys[2] + '"'
+ " color=" + '"' + "8BBA00" + '"'
// + " anchorBorderColor=" + '"' + "F1683C" + '"'
// + " anchorBgColor=" + '"' + "F1683C" + '"'
+ ">").append(undosb).append("</dataset>")
.append("</chart>");
response.setCharacterEncoding("UTF-8");
response.getWriter().print(xmlsb.toString());
}

前台代码只需setDataXML,在要展示的div中，请求action，获取后台数据，得到后set数据渲染到div即可

前台代码：
<div id="sysOverview" class="proble_list con_8px">
<script type="text/javascript">

Ext.onReady(function(){

Ext.Ajax.request(
{
url:'/itssp/welcomemgr/welcome.do?method=showSysOverview&num=3',
method: 'post',
success: function(response){
var dataxml = response.responseText;
       var myChart = new FusionCharts("./scripts/fusionCharts/swf/MSColumn3D.swf", "ChartId", "445", "234", "0", "0");
    myChart.setDataXML(dataxml);   
    myChart.render("sysOverview"); 
}
});
});
   
</script>

</div>

效果图：