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

2025-11-15 05:25:37

1、首先,在Web项目下创建一个动态JSP页面“Dougnut3D.jsp”,根据圆环图的类型取名,需科总要将原来有关规定鬼糟躲JSP的路径删除,防止找不到文件,如下图所示:

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

2、创建FusionCharts圆环图(3D),需要引入FusionCharts核心FusionCharts.js和JavaScript核心jquery-1.11.0.js,如下图所示:

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

3、引入js后,现在要做的是创物捧建3D圆环图,引入3D圆环图SWF文件:Doughnut3D.swf,正确编写圆环图的ID以及宽度、高度,引入到页面中的ID,如下图所示:

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

4、编写创建圆环图的js后,需要将圆环图引入到容器中,一般情况是通过div容器

<div id="doughnut3D"></div>

如下图所示:

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

5、最后,在创建圆环图的js中需要引入数据源“doughnut3D.xml”,注意其中的各个属性的用法

<?xml version="1.0" encoding="UTF-8"?>

<chart caption='2013年某水果市场香蕉销售量' showPercentageValues='1' baseFontSize='14'

       baseFont='微软雅黑' baseFontColor='#FF0000' showLegend='1' legendPosition='BOTTOM'

       legendBgColor='#00FF00' legendBorderColor='#CCCCCC' reverseLegend='1'

       interactiveLegend='1'>

   <set label='第一季度' value='595626' />

   <set label='第二季度' value='326562' />

   <set label='第三季度' value='785492' />

   <set label='第四季度' value='965662' />

</chart>

编写完毕后,启动Tomcat运行项目

如下图所示:

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

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