在MyEclipse下用FusionCharts制作2D饼图

来源：互联网 2023-03-16 23:57:27 318

FusionCharts是一款可以制作各种不同的动态图的组件工具，结合Flash编译成的SWF文件，以XML和JSON两种数据格式提供数据源，生成各种图形。饼图是以一个圆形展示出来，然后将圆形分为几个部分，按照比例展示数据。下面要讲述的是如何制作2D饼图，详细步骤如下：

工具/原料

第一步，新建一个Web Project，在WebRoot下将FusionCharts中的有关SWF文件和JavaScript文件拷贝到相应的文件目录下，新建一个jsp文件夹，并在该目录下新建一个JSP页面“Pie2D.jsp”，如下图所示：

在MyEclipse下用FusionCharts制作2D饼图

第二步，将生成饼图所需要的js文件引入，如下图所示：

script type="text/javascript" src="../fusioncharts/scripts/jquery-1.11.1.js">/script>

script type="text/javascript" src="../fusioncharts/scripts/FusionCharts.js">/script>

在MyEclipse下用FusionCharts制作2D饼图

第三步，在引入的SWF文件中找到2D饼图的SWF-----Pie2D.swf，如下图所示：

在MyEclipse下用FusionCharts制作2D饼图

第四步，通过以下函数生成2D饼图

var pie2DChart = new FusionCharts( "../fusioncharts/swf/Pie2D.swf",

"pie2DChartId", "100%", "500", "0" );

pie2DChart.setXMLUrl("data/pie2D.xml");

pie2DChart.render("pie2D");

并且render中的ID要和页面容器DIV中的ID一致，如下图所示：

在MyEclipse下用FusionCharts制作2D饼图

第五步，接着，就是来编辑数据源“pie2D.xml”，如下图所示：

在MyEclipse下用FusionCharts制作2D饼图

第六步，数据源编辑好后，启动Tomcat服务器，在浏览器地址栏中输入“http://localhost:8080/FusionCharts/jsp/Pie2D.jsp”，结果发现引入的js文件找不到路径，然后将以下几句删除

%String path = request.getContextPath();String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";%>

base href="%=basePath%>">

重新刷新页面，饼图就出来

在MyEclipse下用FusionCharts制作2D饼图

6此文章未经授权抓取自百度经验

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：javascript中最常见的数据类型转换下一篇：Vue.nextTick 的实现方法