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

2025-10-21 17:44:42

1、第一步,由于FusionCharts中的图是通过SWF生成,需要在服务器上运行。

首先,创建Web项目,在WebRoot下新建jsp或HTML文件,这里新建动态的jsp页面“Dougnut.jsp”,如下图所示:

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

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

如下图所示:

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

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");

        });

如下图所示:

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

4、第四步,创建圆环图,在页面如何引入,注意需要给图形容器一个id属性,可以直接调用到,

 <div style="width: 100%; height: 100%;vertical-align: middle;text-align: center;">

           <div id="doughnut2D"></div>

     </div>

如下图所示:

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

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

如下图所示:

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢