FusionCharts HelloWorld -

weigang.gao

浏览: 491797 次
性别:
来自: 上海

最近访客更多访客>>

sd_zf

muzhimin

huan0727

cmsmsc123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

FusionCharts HelloWorld

博客分类：

FusionCharts

FusionCharts的官网：http://www.fusioncharts.com/documentation/

这个东西是要收费的，所以你只能从官网下载到有水印的swf文件

第一个简单例子的目录结构如下：

a.index.jsp非常典型的Jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>My First FusionCharts</title>
   </head>
   <body bgcolor="#ffffff">
      <h1>FusionCharts HelloWorld!</h1>
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="300" id="Column3D" >
         <param name="movie" value="FusionCharts/Column3D.swf" />
         <param name="FlashVars" value="&dataURL=Data/Data.xml">
         <param name="quality" value="high" />
         <embed src="FusionCharts/Column3D.swf" flashVars="&dataURL= Data/Data.xml" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
      </object>
</body>
</html>

其中Column3D.swf是flash动画文件，在FusionCharts的资源包中，Data.xml是Column3D.swf显示数据的数据源。

b.数据源Data.xml中的数据如下：(value中必须有值，否则flash动画文件无法显示。注意：在google中修改value的值是无法显示flash动画的)

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
    <set label='January' value='17400' />
    <set label='February' value='19800' />
    <set label='March' value='21800' />
    <set label='April' value='23800' />
    <set label='May' value='29600' />
    <set label='June' value='27600' />
    <set label='July' value='31800' />
    <set label='August' value='39700' />
    <set label='September' value='37800' />
    <set label='October' value='21900' />
    <set label='November' value='32900' />
    <set label='December' value='39800' />
</chart>

c.部署到服务器上，效果图如下

d.在google浏览器中查看页面元素，可以观察到与JSP页面一样。