FusionWidgets DrawingPad图

来源：互联网发布：大气监测站点优化编辑：程序博客网时间：2024/04/29 02:19

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、运行结果

1 0