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>
如下图所示：
