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://www.cnblogs.com/atree/archive/2010/08/27/FusionCharts-Free-dataXML.html

相关文档：FusionCharts参数的详细说明和功能特性

　　　　　FusionCharts Free使用文档教程第一章--FusionCharts Free介绍

　　　　   FusionCharts Free使用文档教程第二章-FusionCharts Free安装

　　　　　FusionCharts Free使用文档教程第三章-FusionCharts Free我的第一个图形

　　　　 FusionCharts Free使用文档教程第四章-FusionCharts Free使用JavaScript加载图形

转自：AJava.org    作者：道长A

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

原文地址：http://ajava.org/hot/fusioncharts/872.html

转载于:https://www.cnblogs.com/atree/archive/2010/08/27/FusionCharts-Free-dataXML.html