道长A的地盘

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

[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第九章--动态改变图形的类型和数据

在前面的章节里,我们已经了解了图形的基本使用方法以及图形XML,现在我们已经有能力做出基本的图形了,如果你现在就把它应用到你的项目里,我认为没有任何问题,而且我也相信你还能举一反三地,发展出一些“新”的用法。
那我们就开始吧。


动态改变图形的类型


在项目中,我们有时会需要在页面上方便地改变图形的类型,当然,如果页面不刷新就能看到改变的结果,那是最理想的。举个例子来说,在一个页面上,显示了一个月销售额的柱状图,但用户要求还可以查看月销售额的饼图,区域图。要实现这个需求,一般的做法是,再做两个页面,一个显示饼图,一个显示区域图,用户想看这两个图,点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术,来实现页面无刷新,这样用户的体验会更好一些。只是程序员累一点而已。
难道我们一定要这么累吗?不!其实我们可以有更好的办法,前提是你采用了FCF作为你的报表解决方案。
那么,在FCF里,是怎么实现上面的需求的呢?简单点说,思路是这样的:
1、使用JavaScript加载第一个图形(如柱状图),至于是用dataXML方法,还是dataURL方法,都可以。
2、当需要改变图形类型(如改成饼图)时,我们再创建一个新的FusionCharts类实例(它的SWF文件是饼图),把它render到原来的DIV。
就是这么简单。

我们来看看代码吧。


<HTML>       
   
<HEAD>       
      
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>       
      
<SCRIPT LANGUAGE="JavaScript">       
         
//数据        
         var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/>   
     <set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>
";        
         
/*        
         * 当用户单击按钮时调用这个方法。        
  * 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。        
         
*/
        
         
function updateChart(chartSWF){        
            
//Create another instance of the chart.        
            var chart1 = new FusionCharts(chartSWF, "chart1Id""400""300""0""0");         
            chart1.setDataXML(strXML);        
            chart1.render(
"chart1div");        
         }
        
      
</SCRIPT>       
   
</HEAD>       
<BODY>       
   
<div id="chart1div">       
   FusionCharts        
   
</div>       
   
<script language="JavaScript">         
      
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf""chart1Id""400""300""0""0");        
      chart1.setDataXML(strXML);        
      chart1.render(
"chart1div");        
   
</script>       
       
   
<form name='frmUpdate'>       
   Show as:         
      
<input type='button' value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' />         
      
<input type='button' value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' />         
      
<input type='button' value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' />         
</form>       
   
</CENTER>       
</BODY>       
</HTML>



上面的代码非常浅显,就不做解释了。


动态改变图形的数据

我们已经会动态改变图形的类型了,动态改变数据和上面的原来一样,我们只需要在新建实例的时候,传入新的数据就可以了。
那么为什么还要单独来讲解这个呢?因为FCF给我们提供了一个更简单的方法,那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid,第二个参数是XML数据字符。
来看看下面的代码。

<HTML>   
   
<HEAD>   
      
<TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>     
      
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>   
      
<SCRIPT LANGUAGE="JavaScript">   
         
function updateChart(DOMId){    
            updateChartXML(domId,
"<graph><set name='A' value='32' /></graph>");     
          }
    
      
</SCRIPT>   
   
</HEAD>   
   
<BODY>   
      
<div id="chart1div">   
         FusionCharts    
      
</div>   
      
<script language="JavaScript">     
         
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf""chart1Id""400""300");     
         chart1.setDataXML(
"<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></graph>");    
         chart1.render(
"chart1div");    
      
</script>     
      
<form name='frmUpdate'>   
         
<input type='button' value='改变数据' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate'>     
      
</form>     
</HTML> 



当我们单击”改变数据“按钮后,会调用updateChart()方法,它会使用新的数据来重新构建图形。

这种方案看起来,好像是比较好。然而,在前面我们说了,使用dataXML方法加载数据时,不能含有中文字符,同理,使用updateChartXML方法,也不能有中文字符。如果你要使用中文,还是用第一种方法吧。你可能会想,既然有updateChartXML方法,那是不是有updateChartURL方法呢?我们用它不就可以了吗?是的,是有这个方法,不过,FusionCharts Free版本里没有,只有FusionCharts版本里有。想用吗?拿钱来!
下章我们来讲讲FCF的下钻图形,听上去很专业,其实就是图形的连接,包括超连接,JavaScript。
本文原始地址:http://ajava.org/hot/fusioncharts/876.html



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

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

评论

# re: [AJava原创]FusionCharts Free中文开发指南[使用文档教程]第九章--动态改变图形的类型和数据  回复  更多评论   

updateChart
这个方法又new了一次chart,测试了下如果多的话浏览器会挂掉...
还不如改下他的原JS,在setDataXML时增加一个是否强制再次读取XML数据
2009-03-24 12:47 | aisdf

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


网站导航: