系统中第一个报表框架是jfreeCharts,这个框架使用起来也比较方便,但功能不是很强大,而且页面(生成的图片)也不怎么美观(虽然可以尽力将其调至最佳状态)。老总觉得这框架太丑陋,没脸见人,让我找找js的框架。
js框架页面渲染能力比较出色,而且轻量易于使用和维护。在网上看了看,还真不少。比如时下流行的jsCharts、fusionCharts(free/v3 eg),效果最炫的highCharts,当然还有搜索巨头google的jgCharts,jQuery Google Charts,与prototype结合较为紧密的Protochart、Protovis等等。这些框架一开始还真让人眼花缭乱了。
老总看到效果后第一个选的就是Highcharts,highcharts官方的文档写的还真详细(英文),做好后效果还真不错。但浏览器跑着跑着就被卡住了。用sIEve测试,内存泄露相当严重。偶滴个神啊,这东西还敢拿出来卖钱(虽说不贵,也就一百来块钱,但总不能拿出来害人吧)。这个酷炫的东西就这样被无形的扼杀了,不过还是希望Highcharts在下个版本时将这个漏洞给补上。看了看其他的js报表工具,也有不少存在内存泄露的。我这里就不一一列举了,有兴趣的朋友可以自己试试。
无奈之下,只好有去看其他的框架,使用框架,稳定性是首要的,我的首选是jsCharts,但jsCharts没有动态效果,而且还存在一些bug,比如中文乱码的问题。中文乱码现在应该不算是问题了,已经有人将这个问题给解决了。jsCharts是将所有要展现的信息统一绘图,当然也包括标题,横纵坐标说明信息等等。这样一来,由于中文是没法绘图的,中文的显示就成立一堆乱码。以下是乱码的解决方案,如果不太感兴趣,可以略过不看。
1.从网上下载jscharts_mb.js,将jscharts.js替换。
2.页面编码设置为utf-8,最好在页面头部分将下面这句也加进去:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
3.在生成一个JSChart实例之后紧跟着执行一个函数patchMbString(),如:
var myChart = new JSChart('graph', 'pie');
myChart.patchMbString();
//以下是设置字体样式,不是必须的,可以自行选择
myChart.setFontFamily("微软雅黑");
myChart.setAxisValuesFontSize(9);
myChart.setPieUnitsFontSize(10);
下面说说我在系统中用的fusionCharts框架,这个框架生成的是flash文件,所以动画效果是很明显的,最让人欣慰的是,它不存在内存泄露的情况。
fusionCharts官方有示例,但没有文档。我对此深感不爽。改个属性都相当的麻烦,或许该去看看具体实现。
fusionCharts的使用其实也很简单,按照给出的模板来,应该是很方便的,最让我感到头痛的是标题字体大小的改变。目前没有找到直接相对应的属性,只好采取一些折中的方式,比如整体字符调大,页面调成适中的比率等。<graph>标签中有个outCnvBaseFontSize属性,<categories>中有个fontSize属性,两相结合者调整。
/** * fusionCharts */ StringBuffer graphs=new StringBuffer(255); graphs.append("<graph ") .append(" decimalPrecision='1'")// showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' .append(" caption='"+(miniWin?DateFormatUtil.getCurYYYYMM(null):"")+"风险事件变更统计' outCnvBaseFontSize='"+(miniWin?12:15)+"' "+(allZero?" yAxisMaxValue='1' ":" ")+">"); if(rowKeys!=null&&rowKeys.length>0){ //风险事件等级类型-x graphs.append("<categories font='宋体' fontColor='000000' fontSize='"+(miniWin?12:15)+"' > "); if(rowKeys.length==1){ for (int i = 0; i < rowKeys.length; i++) {// graphs.append("<category name='"+rowKeys[i]+"' />"); } graphs.append("</categories>"); //添加数据 String [] colors={"AA4643","80699B","4572A7", "89A54E", "3D96AE", "DB843D","92A8CD", "A47D7C","B5CA92"}; for (int i = 0; i < colKeys.length; i++) { graphs.append("<dataset seriesname='"+colKeys[i]+"' color='"+colors[i]+"'>"); graphs.append("<set value='"+data[0][i]+"' />"); graphs.append("</dataset>"); } }else{ for (int i = 0; i < colKeys.length; i++) {// graphs.append("<category name='"+colKeys[i]+"' />"); } graphs.append("</categories>"); //添加数据 String [] colors=new String []{"4572A7", "AA4643", "89A54E", "80699B", "3D96AE", "DB843D", "92A8CD", "A47D7C", "B5CA92"}; for (int i = 0; i < rowKeys.length; i++) { graphs.append("<dataset seriesname='"+rowKeys[i]+"' color='"+colors[i]+"'>"); for (int j = 0; j < colKeys.length; j++) {// graphs.append("<set value='"+data[i][j]+"' />"); } graphs.append("</dataset>"); } } } graphs.append("</graph>");//end request.setAttribute("graphs", graphs.toString());
jsp页面代码如下:
<head> <title>风险图表</title> <jsp:include page="../common/meta.jsp"/> <!-- 1. Add these JavaScript inclusions in the head of your page --> <script type="text/javascript" src="${root}/js/FusionCharts/FusionCharts.js"></script> </head> <body> <table width="98%" border="0" cellspacing="0" cellpadding="3" align="center"> <tr> <td valign="top" class="text" align="center"> <div id="chartdiv" align="left">FusionCharts. </div> <script type="text/javascript"> var chart =null; <s:if test="winModel=='mini'"> chart = new FusionCharts("${root}/js/FusionCharts/FCF_MSColumn3D.swf", "ChartId", "284", "222"); </s:if><s:else> chart=new FusionCharts("${root}/js/FusionCharts/FCF_MSColumn3D.swf", "ChartId", "700", "500"); </s:else> chart.setDataXML("${graphs}"); chart.render("chartdiv"); </script> </td> </tr> </table> </body>