FusionChart第一接触

在前面的项目中使用的是OpenFlashChart，是一个非常好的项目，效果也非常好，在后来无意接触了FusionCharts，能够在两个Flash图表之间实现类似于Master-Details的样式，可以调用Javascript，感觉又比OFC要好一点，而且OFC的格式控制JSON数据比较复杂，而FC的就比较简单，这可能是因为FC把每个图标都独立做出来的缘故吧，虽然FC是商业的，不过也有一个Free Fusion Charts的项目有一些免费的图表。
下载FCF，把FusionCharts.js文件引入到文件中，并且把需要的图表文件的swf复制到项目中，如Line.swf是线形图，在FCF项目中的名称为FCF_Line.swf，下面就可以创建图表了：

<div id="chartdiv" align="center"></div>
						<script type="text/javascript">
							var myChart = new FusionCharts("<c:url value="/FusionCharts/Column3D.swf"/>", "myChartId", "550", "450","0", "0");
							myChart.setDataXML("${chart}");
							myChart.render("chartdiv");
						</script>

${chart}是Spring mvc返回的xml格式的数据，如：

<graph caption='投票统计' xAxisName='姓名' yAxisName='票数' showNames='1' decimalPrecision='0' formatNumberScale='0'  baseFontSize ='14'>
<set name='石头' value='2' color='89144d' link='Javascript:show(1)'/>
<set name='石头等等' value='4' color='e176ed' link='Javascript:show(2)'/>
<set name='石头' value='4' color='11a95f' link='Javascript:show(4)'/>
</graph>

link属性指定的是点击后执行的操作，也可以是链接地址，如果需要在新窗口打开，那么前面加上“n-”（这个我没试过，网上是这么说的，呵呵），baseFontSize ='14'是需要设置的字体大小，默认似乎是9，很模糊，show就是需要调用的javascript函数：

<script language="javascript">
		function show(uid){
			var strURL = "/poll/details.do" + "?id=" + uid;
			strURL = escape(strURL);
			var chart1 = new FusionCharts("/poll/FusionCharts/Line.swf", "chart1Id", "550", "450", "0", "0");		   			
			chart1.setDataURL(strURL);
			chart1.render("chartdiv2");	
		}
	</script>

注意strURL需要escape，如果是URL的话，需要通过setDataURL进行设置，这个URL返回的数据也是类似的xml格式