道长A的地盘

http://Java.Im 这个网址NB吧?是道长的新网站,您不去看看吗?
随笔 - 28, 文章 - 1, 评论 - 73, 引用 - 0
数据加载中……

[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据

在前面的例子里,我们使用的数据都是一个单独的XML文件,它可以被很多需要它的文件来调用。但是有的时候,我们可能不需要单独的文件,这时,我们就可以使用dataXML 方法来进行数据的调用。


使用dataXML提供数据


dataXML 和dataURL都可以提供数据,dataURL是以把XML文件地址以URL的形式告诉FCF,如一个静态的文件Data.xml,或者是一个动态的文件,如mydata.jsp(页面返回XML格式的文本)。dataXML则是以XML文本的形式告诉FCF。可能有点不好理解,看看下面的代码就知道了。

<html>   
<body bgcolor="#ffffff">   
<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/FCF_Column3D.swf?chartWidth=600&chartHeight=500" />   
   
<param name="FlashVars" value="&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>">   
   
<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


看下面的代码。

<html>   
<head>   
   
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>   
</head>     
<body bgcolor="#ffffff">   
   
   
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>   
   
<script type="text/javascript">   
      
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf""myChartId""600""500");    
      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>");    
          
      myChart.render(
"chartdiv");    
   
</script>   
   
</body>   
</html>   



原来我们调用的是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()。
本文原始地址:http://ajava.org/hot/fusioncharts/872.html



AJava.org --一个Java门户! 转载请以连接方式注明来自AJava.org

posted on 2009-03-22 21:57 道长A@ajava.org 阅读(1476) 评论(1)  编辑  收藏 所属分类: FusionCharts 开发指南

评论

# re: [AJava原创]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据  回复  更多评论   

嗯,很不错。比jfreechart容易多了。
2009-03-23 08:53 | ziyoo0830

只有注册用户登录后才能发表评论。


网站导航: