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页面一样。
参考文档:http://wang371134086.iteye.com/blog/1340287
http://jayyanzhang2010.iteye.com/blog/1852170