在MyEclipse下用FusionCharts制作2D圆环图

1、第一步，由于FusionCharts中的图是通过SWF生成，需要在服务器上运行。首先，创建Web项目，在WebRoot下新建jsp或HTML文件，这里新建动态的jsp页面“Dougnut.jsp”，如下图所示：

2、第二步，既然用到FusionCharts，当然要引入它的核心js，又这里要用到jQuery，故要引入jquery-1.11.1.js，jquery文件需要放在FusionCharts js文件前面，如下图所示：

3、第三步，创建圆环图，利用jQuery方法生成图，调用FusionCharts的SWF文件，豹肉钕舞设置图形的宽度、高度，设置图形数据源和容器，$(function(){ var doughnut2DChart = new FusionCharts( "../fusioncharts/swf/Doughnut2D.swf", "doughnut2DChartId", "100%", "500", "0" ); doughnut2DChart.setXMLUrl("data/doughnut2D.xml"); doughnut2DChart.render("doughnut2D"); });如下图所示：

4、第四步，创建圆环图，在页面如何引入，注意需要给图形容器一个id属性，可以直接调用到，<挢旗扦渌;div style="width: 100%; height: 100%;vertical-align: middle;text-align: center;"> <div id="doughnut2D"></div> </div>如下图所示：

5、第五步，圆环图需要数据源，才能展现具体的图形数据，使用XML格式的数据源，新建一个XML文竭惮蚕斗件<?xml 即枢潋雳version="1.0" encoding="UTF-8"?><chart caption='2014年8月第一周人数统计' showPercentageValues='1'> <set label='星期一' value='6984' /> <set label='星期二' value='3230' /> <set label='星期三' value='4120' /> <set label='星期四' value='8954' /> <set label='星期五' value='5622' /> <set label='星期六' value='12020' /> <set label='星期日' value='13562' /></chart>配置好了之后，启动Tomcat地址栏输入：http://localhost:8080/FusionCharts/jsp/Dougnut.jsp如下图所示：