FusionCharts HelloWorld

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

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

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

FusionCharts HelloWorld_第1张图片
 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.部署到服务器上,效果图如下

FusionCharts HelloWorld_第2张图片
 d.在google浏览器中查看页面元素,可以观察到与JSP页面一样。

FusionCharts HelloWorld_第3张图片
 

 参考文档:http://wang371134086.iteye.com/blog/1340287

                   http://jayyanzhang2010.iteye.com/blog/1852170

                   http://yinxiangbing.iteye.com/blog/321245

                   http://blog.csdn.net/nfenghklibra/article/details/3124920

你可能感兴趣的:(FusionCharts)