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格式

你可能感兴趣的:(JavaScript,spring,mvc,json,xml)