FusionWidgets DrawingPad图

1、数据源

DrawingPad.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart bgColor='E1F5FF'>
         <annotations>

      <!--Group containing the rectangles-->
            <annotationGroup id='Grp1' >
               <annotation type='rectangle' x='30' y='100' toX='110' toY='220' radius='5' color='453269' />
               <annotation type='rectangle' x='235' y='100' toX='315' toY='220' radius='5' color='453269' />
               <annotation type='rectangle' x='440' y='100' toX='520' toY='220' radius='5' color='453269' />
            </annotationGroup>

      <!--Group containing the text inside the rectangles-->
              <annotationGroup id='Grp2'>
                 <annotation type='text' x='70' y='155' fontSize='12' bold='1' label='客户端' color='FFFFFF'/>
                 <annotation type='text' x='275' y='140' fontSize='12' bold='1' label='浏览器' color='FFFFFF'/>
                 <annotation type='text' x='480' y='155' fontSize='12' bold='1' label='服务端' color='FFFFFF'/>
              </annotationGroup>

      <!--Group containing all the description text         -->
             <annotationGroup id='Grp3' >
                 <annotation type='text' x='170' y='130' label='发送信息请求' fontSize="12" wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='380' y='130' label='请求到数据库' fontSize="12" wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='380' y='200' label='返回响应数据' fontSize="12" wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='170' y='200' label='显示信息' fontSize="12" wrap='1' wrapWidth='100' color='453269'/>
              </annotationGroup>

      <!--Group containing all the arrows-->
             <annotationGroup id='Grp4'>

         <!--arrow for process 2-->
                 <annotation type='line' x='120' y='160' toX='220' color='453269' />
                 <annotation type='line' x='215' y='155' toX='220' toY='160' color='453269' />
                 <annotation type='line' x='215' y='165' toX='220' toY='160' color='453269' />

         <!--arrow for process 6-->
                 <annotation type='line' x='120' y='175' toX='220' color='453269' />
                 <annotation type='line' x='125' y='170' toX='120' toY='175' color='453269' />
                 <annotation type='line' x='125' y='180' toX='120' toY='175' color='453269' />

         <!--arrow for process 3-->
                 <annotation type='line' x='325' y='155' toX='435' color='453269' />
                 <annotation type='line' x='430' y='150' toX='435' toY='155' color='453269' />
                 <annotation type='line' x='430' y='160' toX='435' toY='155' color='453269' />

         <!--arrow for process 4-->
                 <annotation type='line' x='325' y='170' toX='435' color='453269' />
                 <annotation type='line' x='330' y='165' toX='325' toY='170' color='453269' />
                 <annotation type='line' x='330' y='175' toX='325' toY='170' color='453269' />
              </annotationGroup>

      <!--Group containing the header-->
                     <annotationGroup id='Grp5'>
                        <annotation type='text' label='请求响应' fontSize='16' fontColor='666666'
                         bold='1' x='280' y='20'/>
                     </annotationGroup>
           </annotations>
           <styles>
              <definition>

         <!--Shadow for the rectangles-->
                 <style name='Shadow1' type='shadow' distance='7'/>

         <!--Shadow for the labels inside the rectangles-->
                 <style name='Shadow2' type='shadow' strength='3'/>

         <!--Shadow for the description text but with alpha 0 so that the text gets converted into bitmap and can be animated then-->
                 <style name='Shadow3' type='shadow' alpha='0'/>
                 <style name='AnimX' type='animation' param='_x' start='-50' wait='0' duration='1' easing='Bounce'/>
                 <style name='AnimY' type='animation' param='_y' start='-30' wait='1' duration='1' easing='Bounce'/>
                 <style name='AnimXScale' type='animation' param='_xScale' start='0' end='100' wait='2' duration='0.5'/>
                 <style name='AnimAlpha' type='animation' param='_alpha' start='0' wait='2' duration='1'/>
                 <style name='AnimY2' type='animation' param='_y' start='-50' wait='2' duration='1'/>
            </definition>

      <application>
                 <apply toObject='Grp1' styles='Shadow1, AnimX'/>
                 <apply toObject='Grp2' styles='Shadow2, AnimY'/>
                 <apply toObject='Grp3' styles='Shadow3,AnimY2'/>
                 <apply toObject='Grp4' styles='AnimXScale, AnimAlpha'/>
              </application>
           </styles>
</chart>

2、JSP页面

DrawingPad.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionWidgets DrawingPad图</title>
<script type="text/javascript" src="../Chart/JS/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../Chart/JS/FusionCharts.js"></script>
<script type="text/javascript">
    $(function(){
    	var drawingPad = new FusionCharts( "../Chart/SWF/DrawingPad.swf", "drawingPadId", "100%", "550", "0" );
    	drawingPad.setXMLUrl("xml/DrawingPad.xml");
    	drawingPad.render("drawingPadDiv");
    });
</script>
</head>
<body>
   <div id="drawingPadDiv"></div>
</body>
</html>

3、运行结果