1、设计思路
（1）了解FusionCharts中面积图所特有的属性以及共性；
（2）设计出一个面积图，数据源是由XML提供；
（3）在XML中设置面积图的一些属性，美化图形。
2、设计步骤
（1）设计面积图的数据源
area2D.xml：
<?xml version="1.0" encoding="UTF-8"?>
<chart caption='2013年水果年产量' xAxisName='水果名称' yAxisName='水果产量' baseFont='微软雅黑' baseFontSize='12' showValues='0'
baseFontColor='#00FF33' outCnvBaseFont='宋体' outCnvBaseFontSize='14' outCnvBaseFontColor='#0000FF'showLabels='1'
useEllipsesWhenOverflow='1' rotateLabels='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' adjustDiv='1'
rotateYAxisName='1' defaultAnimation='1' yAxisMinValue='0' yAxisMaxValue='10000000' setAdaptiveYMin='1' centerYaxisName='1'
bgColor='#0000FF' bgAlpha='50' bgRatio='50' bgAngle='90' canvasBgColor='#EE7700' showVLineLabelBorder='1' drawAnchors='1'
anchorSides='8' anchorRadius='10' anchorBorderColor='#EEEE00' numDivLines='8' divLineIsDashed='1' numVDivLines='8'
showAlternateVGridColor='1' vDivLineIsDashed='1' vDivLineAlpha='50' vDivLineThickness='1' showToolTip='1'>
<set label='苹果' value='8945459' />
<set label='橘子' value='3652120' />
<set label='桃子' value='4578540' />
<set label='荔枝' value='1245120' />
<set label='梨子' value='8451222' />
<set label='李子' value='4125120' />
<set label='芒果' value='2356412' />
<set label='香蕉' value='7541201' />
<set label='菠萝' value='6541222' />
<set label='菩提' value='1201421' />
<set label='樱桃' value='6541112' />
<set label='葡萄' value='2356666' />
<trendLines>
<line startValue='7000000' color='009933' displayvalue='Target' />
</trendLines>
<styles>
<definition>
<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
</definition>
<application>
<apply toObject='Canvas' styles='CanvasAnim' />
</application>
</styles>
</chart>
var area2D = new FusionCharts( "../script/Charts/Area2D.swf", "myChartId", "100%", "540", "0" );
area2D.setXMLUrl("data/area2D.xml");
area2D.render("area2DChart");
<div id="area2DChart"></div>
4、源码
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>FusionCharts 2D面积图</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../script/Charts/FusionCharts.js"></script>
<style type="text/css">
body{
98%;
height:100%;
font-size:12px;
}
#area2DChart{
100%;
}
</style>
<script type="text/javascript">
$(function(){
var area2D = new FusionCharts( "../script/Charts/Area2D.swf", "myChartId", "100%", "540", "0" );
area2D.setXMLUrl("data/area2D.xml");
area2D.render("area2DChart");
});
</script>
</head>
<body>
<div id="area2DChart"></div>
</body>
</html>