道長A的地盤

          http://Java.Im 這個網(wǎng)址NB吧?是道長的新網(wǎng)站,您不去看看嗎?
          隨筆 - 28, 文章 - 1, 評論 - 73, 引用 - 0
          數(shù)據(jù)加載中……

          [AJava原創(chuàng)]FusionCharts Free中文開發(fā)指南[使用文檔教程]第五章--FusionCharts Free使用dataXML加載數(shù)據(jù)

          在前面的例子里,我們使用的數(shù)據(jù)都是一個單獨的XML文件,它可以被很多需要它的文件來調(diào)用。但是有的時候,我們可能不需要單獨的文件,這時,我們就可以使用dataXML 方法來進(jìn)行數(shù)據(jù)的調(diào)用。


          使用dataXML提供數(shù)據(jù)


          dataXML 和dataURL都可以提供數(shù)據(jù),dataURL是以把XML文件地址以URL的形式告訴FCF,如一個靜態(tài)的文件Data.xml,或者是一個動態(tài)的文件,如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的文件里。

          可以看到,F(xiàn)lashVars 的值是這樣的一種形式:
          <PARAM NAME="FlashVars" Value="&dataXML=completeXMLData">
          在EMBED 標(biāo)記里,是這樣的:
          <EMBED ... FlashVars="&dataXML=completeXMLData">
          而原來我們放到FlashVars的兩個參數(shù)--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>   



          原來我們調(diào)用的是setDataURL()方法,而現(xiàn)在是setDataXML()方法,它的參數(shù)則是一個完整的XML字符串。

          不管我們使用什么方法,我們都能得到一樣的結(jié)果。

          setDataXML()方法的問題


          我們知道,在使用GET方法得到參數(shù)時,瀏覽器對參數(shù)值的長度是有一定的限制的,所以,如果XML字符過長,可能會產(chǎn)生問題。這時我們就需要使用setDataURL()方法。

          如果你的XML字符里含有雙字節(jié)字符,例如中文字符,你就不能使用setDataXML()方法,你應(yīng)該使用setDataURL()方法。

          最佳模式


          在我們的實際應(yīng)用里,數(shù)據(jù)不可能是靜態(tài)的,它可能是有用戶選擇查詢條件,然后提交給服務(wù)器,服務(wù)器返回一個查詢的結(jié)果,比如search.jsp?year=2008。所以我給大家推薦的最佳模式是使用setDataURL()方法,并且使用JavaScript來加載圖形。

          在使用setDataURL()方法時,如果地址里含有“?”、“&”等字符,你就需要對這個地址進(jìn)行URL編碼。在JavaScript里進(jìn)行編碼,使用escape(url)這個函數(shù)。如果你想在服務(wù)器端就進(jìn)行編碼,那就使用你的編程語言提供的URL編碼方法。在java里進(jìn)行編碼的函數(shù)是java.net.URLEncoder.encode()。
          本文原始地址:http://ajava.org/hot/fusioncharts/872.html



          AJava.org --一個Java門戶! 轉(zhuǎn)載請以連接方式注明來自AJava.org

          posted on 2009-03-22 21:57 道長A@ajava.org 閱讀(1514) 評論(1)  編輯  收藏 所屬分類: FusionCharts 開發(fā)指南

          評論

          # re: [AJava原創(chuàng)]FusionCharts Free中文開發(fā)指南[使用文檔教程]第五章--FusionCharts Free使用dataXML加載數(shù)據(jù)  回復(fù)  更多評論   

          嗯,很不錯。比jfreechart容易多了。
          2009-03-23 08:53 | ziyoo0830
          主站蜘蛛池模板: 瑞丽市| 福建省| 柏乡县| 凤凰县| 内丘县| 四川省| 大石桥市| 红河县| 金山区| 洮南市| 射洪县| 华池县| 乌兰县| 厦门市| 松桃| 旬阳县| 永善县| 泰安市| 东丰县| 巴青县| 临颍县| 丰镇市| 昌都县| 盱眙县| 固安县| 青川县| 宝清县| 元谋县| 阿尔山市| 铜陵市| 桂林市| 专栏| 新田县| 南皮县| 洮南市| 赤峰市| 漳浦县| 新昌县| 汶上县| 梨树县| 灵丘县|