（一）用grails和FusionCharts(饼图和柱形图)来实现fusionCharts的下钻(link)以及基于数据库动态获得XML

工作准备：把要用到的饼图和柱形图的flash（Column3D.swf，Pie3D.swf）
放到web项目的根目录FusionCharts（这个可以自己定义）中，在gsp页面中添加（FusionCharts.js） <scriptlanguage="JavaScript"src="${request.getContextPath()}/FusionCharts/FusionCharts.js">

1.在controller中的action代码 此时的情况是登录进入系统后要自动去获得
xml数据。
所以在登录进入时，直接在登录action里调用String getBigCatePieXml()（饼图）
String getbardataXml()方法（柱形图）
   

    String getBigCatePieXml(){
        def logman = Client.findByName(session.name)
        def logmanComany = logman.clientCompany

               //admin
       Sql sql = new Sql(dataSource)
        if(session.name=='admin'){       
 def typeStr = "select cate.pur_big_cate_id as type_id,
count(list.id) as num FROM pur_list as list,pur_category cate 
where list.type_id = cate.id  group by cate.pur_big_cate_id"
         typeArr = sql.rows(typeStr)
        //设备总数
        def allshebeiStr = "select count(id) as num FROM pur_list "
         allshebeiArr = sql.rows(allshebeiStr)
        }else{       
 //def logmanComany = logman.clientCompany
       // Sql sql = new Sql(dataSource)
        def typeStr = "select cate.pur_big_cate_id as type_id,
count(list.id) as num FROM pur_list as list,pur_category cate 
where list.type_id = cate.id and 
client_company_id = "+logmanComany.id 
+" group by cate.pur_big_cate_id"
         typeArr = sql.rows(typeStr)
        //设备总数
     def allshebeiStr = "select count(id) as num FROM
 pur_list
 where client_company_id = "+logmanComany.id
         allshebeiArr = sql.rows(allshebeiStr)
        }
def pieXmldata = 
"<chart caption='您当前共有${allshebeiArr[0].num}
台设备' baseFontSize='12' >"
          typeArr.each{
   pieXmldata+=" <set label='"+
PurBigCate.get(it.type_id).name+"' value='"+it.num+"' 
link='../purList/piesearchCate/"+it.type_id+"'/>"
	  }
//link是实现FusionCharts的下钻功能的，在接下来的文章将会说明多层次下钻（3层）
	  pieXmldata+="</chart>"
         println pieXmldata
	 return pieXmldata //得到pieXmldata 此为xml串 并且返回
	    }

String getbarXml(){
        def logman = Client.findByName(session.name)
	def logmanComany = logman.clientCompany

        def bigCate
        if(params.bigCate){
             bigCate = params.bigCate
        }
        //admin
        Sql sql = new Sql(dataSource)
        if(session.name=='admin'){
        def barStr = "select 
(to_char(list.purchase_time,'YYYY')) 
as year,count(list.id) as num from 
pur_list as list,pur_category as cate where list.type_id = cate.id "
        if(bigCate){
     barStr +=" and cate.pur_big_cate_id ="+bigCate
        }
        def barorder = " group by (to_char(list.purchase_time,'YYYY')) order by (to_char(list.purchase_time,'YYYY'))"
         barStrAll = barStr + barorder
        def maxStr = " group by 
(to_char(list.purchase_time,'YYYY')) order by num desc"
         barMaxStr = barStr+ maxStr
        }else{
       def barStr = "select 
(to_char(list.purchase_time,'YYYY')) 
as year,count(list.id) as num from 
pur_list as list,pur_category as cate where list.type_id = cate.id and list.client_company_id = "+logmanComany.id
        if(bigCate){
   barStr +=" and cate.pur_big_cate_id ="+bigCate
        }
        def barorder = " group by (to_char(list.purchase_time,'YYYY')) order by (to_char(list.purchase_time,'YYYY'))"
     barStrAll = barStr + barorder
    def maxStr = " group by (to_char(list.purchase_time,'YYYY')) order by num desc"
         barMaxStr = barStr+ maxStr
        }
	
	 barArr = sql.rows(barStrAll)
         barMaxArr = sql.rows(barMaxStr)
     def  zhuXmldata = "<chart caption='购入数量(台)' baseFontSize='12' >"
       barArr.each{
zhuXmldata+=" <set label='"+it.year+"年"+"' value='"+it.num+"' link='${request.getContextPath()}/purList/searchByYear/"+it.year+"' />"
	 }

	 zhuXmldata+="</chart>"
         println zhuXmldata
	 return zhuXmldata
    }

在homeBody里调用String getBigCatePieXml()（饼图）
String getbardataXml()方法（柱形图）
def homeBody ={
..................................//代码省略
def peixml = getBigCatePieXml()
	def barxml = getbarXml()
	         println peixml
		 println barxml
render(view:'homeBody',model:[peixml:peixml，barxml：barxml])
//把peixml，barxml传到页面(view:'homeBody')就是指homeBody.gsp  
}
    

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
<meta http-equiv='Content-Type' 
content='text/html; charset=GBK'/>
  <meta http-equiv="X-UA-Compatible" 
content="IE=EmulateIE7" />
     <script language="JavaScript" src="${request.getContextPath()}/FusionCharts/FusionCharts.js">//这个必须要写的
        </script>
      		<title>首页</title>
             
</head>   
[img][/img]<body style="background:#fff;">  
     。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。  //js以及代码省略                                              <divid="chartdivbing" align="center" ></div>
// 这是饼图
                                                        <scripttype="text/javascript">   
var xmldata = "${peixml}"
							 //alert(xmldata)
var myChart = new FusionCharts
("${request.getContextPath()}/FusionCharts/Pie3D.swf", 
"myChartId", "105%", "300", "0", "0");
                                                            myChart.setDataXML(xmldata)
//通过setDataXMl()方法来获得xml串
          
 myChart.render("chartdivbing")
         
</script>
       。。。。。。。。。。。。。。。。。。。。。。                                                     
                               
 </td>
                  //这是柱形图              
                  
 <div id="chartdivzhu"></div>
                        
 <script type="text/javascript" align="center">
 var xmlbardata = "${barxml}"
                          
 var myChart = new FusionCharts
("${request.getContextPath()}/FusionCharts/Column3D.swf", 
"myChartId", "100%", "300", "0", "0");
                          
 myChart.setDataXML(xmlbardata)
                          
 myChart.render("chartdivzhu")
                          
 </script>
         
                 
                      
</body>
</html>    

得到的效果如上饼图和柱形图
我把图片上传了 想看效果自己去看吧

评论

1 楼 java-007 2010-10-27  

嗯，不错。支持。