[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据
时间：2009-01-12 14:16 作者：道长A
喜欢本页内容吗？那就收藏到您的博客吧。如果您有以下书签网站的账号，点击它即可收藏。谢谢您的支持！ IE QQ 百度 POCO Yahoo 新浪 365Key 天极 和讯 博拉 Live 奇客 鲜果 收客 饭否 叽歪 >
- <param name="quality" value="high" />
- <embed src="../FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500" flashVars="&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
- </object>
- </body>
- </html>
我们把上面的代码保存到一个叫ChartDataXML.html的文件里。
可以看到，FlashVars 的值是这样的一种形式：
<PARAM NAME="FlashVars" Value="&dataXML=completeXMLData">
在EMBED 标记里，是这样的：
<EMBED ... FlashVars="&dataXML=completeXMLData">
而原来我们放到FlashVars的两个参数--chartWidth，chartHeight，则被放到了SWF文件地址的后面。
使用JavaScript和dataXML
看下面的代码。
1. <html>
2. <head>
3. <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
4. </head>
5. <body bgcolor="#ffffff">
6.
7. <div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
8. <script type="text/javascript">
9. var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
10. myChart.setDataXML("<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>");
11.
12. myChart.render("chartdiv");
13. </script>
14.
15. </body>
16. </html>
17.
原来我们调用的是setDataURL()方法，而现在是setDataXML()方法，它的参数则是一个完整的XML字符串。
不管我们使用什么方法，我们都能得到一样的结果。
setDataXML()方法的问题
我们知道，在使用GET方法得到参数时，浏览器对参数值的长度是有一定的限制的，所以，如果XML字符过长，可能会产生问题。这时我们就需要使用setDataURL()方法。
如果你的XML字符里含有双字节字符，例如中文字符，你就不能使用setDataXML()方法，你应该使用setDataURL()方法。
最佳模式
在我们的实际应用里，数据不可能是静态的，它可能是有用户选择查询条件，然后提交给服务器，服务器返回一个查询的结果，比如 search.jsp?year=2008。所以我给大家推荐的最佳模式是使用setDataURL()方法，并且使用JavaScript来加载图形。
在使用setDataURL()方法时，如果地址里含有“?”、“&”等字符，你就需要对这个地址进行URL编码。在JavaScript里进行编码，使用escape(url)这个函数。如果你想在服务器端就进行编码，那就使用你的编程语言提供的URL编码方法。在java里进行编码的函数是java.net.URLEncoder.encode()。
