javascript 报表框架总结

最新推荐文章于 2025-05-21 06:42:34 发布

原创最新推荐文章于 2025-05-21 06:42:34 发布 · 843 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js报表

js报表专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了在系统中使用的报表框架，包括jfreeCharts、jsCharts、fusionCharts、Highcharts等，并针对各框架的特点进行了对比分析。重点讨论了在选择报表框架时需要考虑的因素，如页面渲染能力、内存泄漏问题、中文乱码处理以及稳定性等。同时，通过实际案例展示了如何解决jsCharts中的中文乱码问题，并介绍了fusionCharts在动画效果和内存管理方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系统中第一个报表框架是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,最好在页面头部分将下面这句也加进去：

    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>