在MyEclipse下用FusionCharts制作2D面积图

2025-07-18 15:47:44

1、首先,在Web项目中新建jsp页面“area2D.jsp”,如下图所示:

在MyEclipse下用FusionCharts制作2D面积图

2、创建面积图需要js文件,引入必要的js文件<script type="text/javascript" src="../fusioncharts/scripts/jquery-1.11.1.js"></script> <script type="text/javascript" src="../fusioncharts/scripts/FusionCharts.js"></script> <script type="text/javascript"> $(function(){ var areaChart = new FusionCharts( "../fusioncharts/swf/Area2D.swf", "areaChartId", "1250", "560", "0" ); areaChart.setXMLUrl("data/area2D.xml"); areaChart.render("area2D"); }); </script>如下图所示:

在MyEclipse下用FusionCharts制作2D面积图

3、在<body></body>中引入面积图容器<div style="text-align: center; vertica造婷用痃l-align: middle;"> <div id="area2D"></div> </div>如下图所示:

在MyEclipse下用FusionCharts制作2D面积图

4、在js文件中,需要引入面积图的数据源"area2D.xml",在jsp文件目录下的data文件夹中新建XML文件“area2D.xml”,如下图所示:

在MyEclipse下用FusionCharts制作2D面积图

5、在“area2D.xml”文件中编写数据源<?xml version="1.0" encoding=&鳎溻趄酃quot;UTF-8"?><chart caption='语文成绩' xAxisName='姓名' yAxisName='分数' baseFont='宋体' baseFontSize='12' showValues='0'> <set label='张华' value='99' /> <set label='李思思' value='89' /> <set label='王五' value='68' /> <set label='赵六' value='78' /> <set label='奇异' value='88' /> <set label='刘思' value='57' /> <set label='十五' value='69' /></chart>如下图所示:

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