初试XML/SWF Charts实例及遇到的问题总结-优快云博客

Xml/Swf Charts是一个基于flash显示的图表组件，其效果还是比较炫的，今天花了一天学习其功能，期间遇到不少问题，最终经过不断调试准备，终于把问题解决了。

简介

Xml/Swf Charts实现了一些3D和动态效果，官方网站： http://www.maani.us/xml_charts/index.php

实例演示： http://www.maani.us/xml_charts/index.php?menu=Gallery

web页面显示需要实现的代码： http://www.maani.us/xml_charts/index.php?menu=Reference&submenu=Web_Page

实例介绍

我实现的功能是一个柱状同，不同柱子从空中逐渐落下的效果： http://www.maani.us/xml_charts/index.php?menu=Gallery&submenu=Stacked_Column

首先从这里下载最新的文件，下载后解压文件，然后用Eclipse创建一个web项目，将解压的文件charts_library、resources、AC_RunActiveContent.js、charts.swf和sample.xml拷贝到WebRoot下。千万注意：除了sample.xml外，其它都是必备文件！

然后新建一个index.jsp页面，按照这里说的方法把必要的代码放入JSP中，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String root = request.getContextPath(); %>
<!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>flash</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="<%=root%>/AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>
</head>
<body>

	<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
	alert("This page requires AC_RunActiveContent.js.");
} else {
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
	if(hasRightVersion) { 
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,45,2',
			'width', '480',
			'height', '300',
			'scale', 'noscale',
			'salign', 'TL',
			'bgcolor', '#777788',
			'wmode', 'opaque',
			'movie', '<%=root%>/charts',
			'src', '<%=root%>/charts',
			'FlashVars', 'library_path=<%=root%>/charts_library&xml_source=<%=root%>/sample.xml', 
			'id', 'my_chart',
			'name', 'my_chart',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'quality', 'high',
			'align', 'middle',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'play', 'true',
			'devicefont', 'false'
			); 
	} else { 
		var alternateContent = 'This content requires the Adobe Flash Player. '
		+ '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
		document.write(alternateContent); 
	}
}
// -->
</script>

</body>
</html>

为了找到正确的资源文件，我尽量写的是绝对路径。

再然后是编写sample.xml文件，XML/SWF Charts解析数据通常通过XML来解析，所以必须定义符合XML/SWF Charts规范的XML数据，具体规则信息在这里可以看到。当然XML是死了，为了实现动态数据，也可以自己动态拼接XML信息，具体怎么做，这里有说明。

我这里因为是直接用官方例子，就直接copy官方的 XML代码到sample.xml，然后还需要修改sample.xml中的一点内容：找到“ url='images/full_screen.swf'”将url替换成“resources/full_screen/full_screen.swf”，因为所有资源文件都放在resources中的。

最后部署到服务器，访问项目即可显示：

错误总结

因为第一次试着做XML/SWF Charts的demo，对其所有功能都不熟悉，在做demo途中遇到不少问题。

①部署后页面空白，不显示任何内容

主要是我把下面这段script代码去掉了，这段代码是必须的

<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>

②部署后本来该显示flash的地方结果只显示了一块带背景色的方块

主要是忘记添加必备文件charts.swf

同时注意：script中配置的参数movie和src就是去掉后缀的charts

③部署后报“flash error 2036 URL not found”错误

把鼠标点到flash上，右键选择后退，能够看到最原始的错误，其实就是sample.xml中配置全屏显示的url路径找不到，把路径改成上面实例说的就行了。这个问题纠结我最久，都没想到鼠标右键看上一页- -||