FCF类似于之前使用的JFreeChart,但是功能更为强大,和炫丽,主要使用Flash技术,所以前端显示非常炫丽。不仅功能强大,而且类型灰常丰富!
首先我得说,FCF是一个跨平台的,跨浏览器的flash图标组件解决方案。能够被N多语言调用。我做的是java,所以当然谈jsp,不过这一点,是2.1版本新增的特性。关于新的一些特性。就不说了。直接上代码。
1、准备工作
1) 下载FCF(最新版本:V2.1);
2) 创建工程,并建立一个文件夹:FusionCharts(默认),之后将所有的SWF文件cp到该文件夹;
3) 创建数据文件(Xxx.xml)
eg:
Data.xml
<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'
showValues='0' formatNumberScale='0' showBorder='1'>
<set label='Jan' value='462' />
<set label='Feb' value='857' />
<set label='Mar' value='671' />
<set label='Apr' value='494' />
<set label='May' value='761' />
<set label='Jun' value='960' />
<set label='Jul' value='629' />
<set label='Aug' value='622' />
<set label='Sep' value='376' />
<set label='Oct' value='494' />
<set label='Nov' value='761' />
<set label='Dec' value='960' />
</chart>
4) 创建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>销售额度柱形图</title>
</head>
<body bgcolor="#fffff">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="600" height="500" id="Column3D">
<param name="movie" value="FusionCharts/Column3D.swf" />
<param name="FlashVars"
value="&dataURL=Data.xml&chartWidth=600&chartHeight=500" />
<param name="quality" value="high" />
<embed src="FusionCharts/FCF_Column3D.swf"
flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500"
quality="high" width="600" height="500" name="Column3D"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
代码解析:
上面的代码,其实就是一个显示flash的简单标记。具体的标签属性不表,值得说的是:不同浏览器对显示flash的要求是不一样的,我们发现有一个embed参数,他的各个属性和值和param参数的值都是一样的,为什么会这样呢?其实这是因为为了在不同的浏览器里都能运行flash的一个解决办法。IE浏览器使用param参数来运行flash,二NetScape则是使用embed参数来运行flash。为此我们均使用该两个标签。
发布,访问,最后你可以看到一个非常炫的chart图。
如果不幸,你没有在页面上看到漂亮的chart图,则可能是因为:
1、SWF没有复制?
2、在页面中,没有正确设置SWF的位置?
3、没有安装flash播放器?
4、没有启用浏览器的flash播放?
5、遇到“Error in loading Data”?可能是因为:Data.xml没有放到正确的文件夹,或者文件名不正确(eg:Data.xml.txt?);
6、遇到“Invaild XML Data”? 可是是因为:Data.xml没有正确编写
第一个FCF应用结束。
首先我得说,FCF是一个跨平台的,跨浏览器的flash图标组件解决方案。能够被N多语言调用。我做的是java,所以当然谈jsp,不过这一点,是2.1版本新增的特性。关于新的一些特性。就不说了。直接上代码。
1、准备工作
1) 下载FCF(最新版本:V2.1);
2) 创建工程,并建立一个文件夹:FusionCharts(默认),之后将所有的SWF文件cp到该文件夹;
3) 创建数据文件(Xxx.xml)
eg:
Data.xml
<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'
showValues='0' formatNumberScale='0' showBorder='1'>
<set label='Jan' value='462' />
<set label='Feb' value='857' />
<set label='Mar' value='671' />
<set label='Apr' value='494' />
<set label='May' value='761' />
<set label='Jun' value='960' />
<set label='Jul' value='629' />
<set label='Aug' value='622' />
<set label='Sep' value='376' />
<set label='Oct' value='494' />
<set label='Nov' value='761' />
<set label='Dec' value='960' />
</chart>
4) 创建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>销售额度柱形图</title>
</head>
<body bgcolor="#fffff">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="600" height="500" id="Column3D">
<param name="movie" value="FusionCharts/Column3D.swf" />
<param name="FlashVars"
value="&dataURL=Data.xml&chartWidth=600&chartHeight=500" />
<param name="quality" value="high" />
<embed src="FusionCharts/FCF_Column3D.swf"
flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500"
quality="high" width="600" height="500" name="Column3D"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
代码解析:
上面的代码,其实就是一个显示flash的简单标记。具体的标签属性不表,值得说的是:不同浏览器对显示flash的要求是不一样的,我们发现有一个embed参数,他的各个属性和值和param参数的值都是一样的,为什么会这样呢?其实这是因为为了在不同的浏览器里都能运行flash的一个解决办法。IE浏览器使用param参数来运行flash,二NetScape则是使用embed参数来运行flash。为此我们均使用该两个标签。
发布,访问,最后你可以看到一个非常炫的chart图。
如果不幸,你没有在页面上看到漂亮的chart图,则可能是因为:
1、SWF没有复制?
2、在页面中,没有正确设置SWF的位置?
3、没有安装flash播放器?
4、没有启用浏览器的flash播放?
5、遇到“Error in loading Data”?可能是因为:Data.xml没有放到正确的文件夹,或者文件名不正确(eg:Data.xml.txt?);
6、遇到“Invaild XML Data”? 可是是因为:Data.xml没有正确编写
第一个FCF应用结束。