Xml/Swf Charts是一個(gè)基于flash顯示的圖表組件，其效果還是比較炫的，今天花了一天學(xué)習(xí)其功能，期間遇到不少問(wèn)題，最終經(jīng)過(guò)不斷調(diào)試準(zhǔn)備，終于把問(wèn)題解決了。
?
- 簡(jiǎn)介
Xml/Swf Charts實(shí)現(xiàn)了一些3D和動(dòng)態(tài)效果，官方網(wǎng)站：
http://www.maani.us/xml_charts/index.php
web頁(yè)面顯示需要實(shí)現(xiàn)的代碼：
http://www.maani.us/xml_charts/index.php?menu=Reference&submenu=Web_Page
?
?
- 實(shí)例介紹
我實(shí)現(xiàn)的功能是一個(gè)柱狀同，不同柱子從空中逐漸落下的效果：
http://www.maani.us/xml_charts/index.php?menu=Gallery&submenu=Stacked_Column
首先從
這里
下載最新的文件，下載后解壓文件，然后用Eclipse創(chuàng)建一個(gè)web項(xiàng)目，將解壓的文件charts_library、resources、AC_RunActiveContent.js、charts.swf和sample.xml拷貝到WebRoot下。千萬(wàn)注意：除了sample.xml外，其它都是必備文件！
?
然后新建一個(gè)index.jsp頁(yè)面，按照
這里
說(shuō)的方法把必要的代碼放入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>
?為了找到正確的資源文件，我盡量寫的是絕對(duì)路徑。
再然后是編寫sample.xml文件，XML/SWF Charts解析數(shù)據(jù)通常通過(guò)XML來(lái)解析，所以必須定義符合XML/SWF Charts規(guī)范的XML數(shù)據(jù)，具體規(guī)則信息在
這里
可以看到。當(dāng)然XML是死了，為了實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)，也可以自己動(dòng)態(tài)拼接X(jué)ML信息，具體怎么做，
這里
有說(shuō)明。
我這里因?yàn)槭侵苯佑霉俜嚼?，就直接copy官方的
XML
代碼到sample.xml，然后還需要修改sample.xml中的一點(diǎn)內(nèi)容：找到“
url='images/full_screen.swf'
”將url替換成“resources/full_screen/full_screen.swf”，因?yàn)樗匈Y源文件都放在resources中的。
最后部署到服務(wù)器，訪問(wèn)項(xiàng)目即可顯示：
?
- 錯(cuò)誤總結(jié)
因?yàn)榈谝淮卧囍鯴ML/SWF Charts的demo，對(duì)其所有功能都不熟悉，在做demo途中遇到不少問(wèn)題。
①部署后頁(yè)面空白，不顯示任何內(nèi)容
主要是我把下面這段script代碼去掉了，這段代碼是必須的
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>
?
②部署后本來(lái)該顯示flash的地方結(jié)果只顯示了一塊帶背景色的方塊
主要是忘記添加必備文件charts.swf
同時(shí)注意：script中配置的參數(shù)movie和src就是去掉后綴的charts
③部署后報(bào)“flash error 2036 URL not found”錯(cuò)誤
把鼠標(biāo)點(diǎn)到flash上，右鍵選擇后退，能夠看到最原始的錯(cuò)誤，其實(shí)就是sample.xml中配置全屏顯示的url路徑找不到，把路徑改成上面實(shí)例說(shuō)的就行了。這個(gè)問(wèn)題糾結(jié)我最久，都沒(méi)想到鼠標(biāo)右鍵看上一頁(yè)- -||
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
