1、首先，在Web项目中新建jsp页面“area2D.jsp”，如下图所示：
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>如下图所示：
3、在<body></body>中引入面积图容器<div style="text-align: center; vertical-align: middle;"> <div id="area2D"></div> </div>如下图所示：
4、在js文件中，需要引入面积图的数据源"area2D.xml"，在jsp文件目录下的data文件夹中新建XML文件“area2D.xml”，如下图所示：
5、在“area2D.xml”文件中编写数据源<?xml version="1.0" encoding="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>如下图所示：
