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&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路徑找不到，把路徑改成上面實例說的就行了。這個問題糾結我最久，都沒想到鼠標右鍵看上一頁- -||
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
