使用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>

效果图：

使用funshionchart技术总结相关推荐

收集的计算机编程电子书目录，仅供日后查阅方便
本人有收集电子书的癖好.每日在网上收集经典的电子书籍,尤其喜欢原版的,看起来舒服.不过总是心血来潮,当时下载后瞅几眼,之后就束之高阁,再也不问津了.很为此苦恼,过后找某本书时也总是不知道在哪,为了查找 ...
Java实现lucene搜索功能
直接上代码: package com.sand.mpa.sousuo;//--------------------- Change Logs---------------------- //<p ...
如何判断飞机的年限_技术流带你鉴定前风挡玻璃更换，不再使用日期判断！
这又是一篇关于前风挡玻璃鉴定的文章,我记得在二手车鉴定微信公众号里面已经发布好几篇这样的文章了,当然每篇文章的住重点不同,今天这一篇应该是完结篇,它们在一起能组成一套玻璃更换系列专题课程: 我们回 ...
【置顶】利用 NLP 技术做简单数据可视化分析教程（实战）
置顶本人决定将过去一段时间在公司以及日常生活中关于自然语言处理的相关技术积累,将在gitbook做一个简单分享,内容应该会很丰富,希望对你有所帮助,欢迎大家支持. 内容介绍如下你是否曾经在租房时因 ...
HTTP服务器端常用推送技术
服务器端推送技术描述不论是传统的HTTP请求-响应式的通信模式, 还是异步的AJAX式请求, 服务器端始终处于被动的应答状态, 只有在客户端发出请求的情况下, 服务器端才会返回响应. 这种通信模式被 ...
程序员如何讲清楚技术方案
最近在评审技术方案,和代码review的时候,遇到刚入行的同学们,很多都讲不清楚技术方案. 具体表现是: – 上来不说需求,直接说算法实现.台下一头雾水,根本不知道设计方案是否合理. – 描述完需求后 ...
Electron、QT和JAVA PC桌面开发技术比较
近几年PC桌面开发越来越多的被Electron,QT和Java技术占领.下面简单比较一下它们的优劣. Electron,势是开发用时快,社区轮子多,整合一下就能用.缺点是打包大,js计算弱. Java ...
低代码技术与市场（Mendix与 OutSystems）
低代码技术与市场(Mendix与 OutSystems) 本文主要参考文章参考链接 https://mp.weixin.qq.com/s/OXCBORheAx99o3fS-ZfUdg https:/ ...
GPU、AI芯片技术市场分析
GPU.AI芯片技术市场分析市场将高速增长,GPU曙光初现,预计到2024年,国内人工智能技术市场规模将达到172亿美元:全球占比将从2020年12.5%上升到15.6%,是全球市场增长的主要驱动力 ...

使用funshionchart技术总结

使用funshionchart技术总结相关推荐

最新文章

热门文章