FusionCharts 2D面积图

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>

（2）设置面积图的图的类型以及引入数据源的路径

var area2D = new FusionCharts( "../script/Charts/Area2D.swf", "myChartId", "100%", "540", "0" );
area2D.setXMLUrl("data/area2D.xml");
area2D.render("area2DChart");

（3）如何在页面引入图形

<div id="area2DChart"></div>

3、运行结果，如图所示

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>