FusionCharts 3.1做的一个效果

在上一篇文章中简单介绍了三款统计图控件，其中FusionCharts Free是我个人觉得很不错的一款。其实类似的支持XML的Flash统计图控件还有amCharts等。只是在使用FusionCharts Free的过程中发现了一些不足，比如饼状图不支持智能标签（SmartLabels），所以数据项很多的时候提示文字相互重叠，显得很乱；多系列的柱状图（Multi-series Column 3D/2D Chart ）不支持横向滚动条等等。于是后来我换了与FusionCharts Free同版本号的FusionCharts 3.1Evaluation版（官网现在最新版是3.2>>）。

下载的压缩包里开发文档首页如下图：

Evaluation版功能相对Free版强大了很多，支持前面提到的SmartLabels和Scroll Charts（Scroll Charts只有2D的）。只是Flash统计图的左上角有FusionCharts的相关文字和链接，这一点可能会让部分人不爽而弃之不用或选择破解版。个人感觉几个文字和链接不影响什么，实在觉得不爽就买正式版本吧（价格还挺贵的……）。

接下来进入正题，讲我在实际应用中做的几个综合效果中的一个吧。

用到了FusionCharts中的Single Series Pie 3D Chart、Single Series Column 2D、Grid Component，还有JavaScript functions as links这一属性，结合jQuery实现。效果如下：

页面代码：

  
  

   
   <!
   
   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=utf-8"
   
    
   
   />
   
   
 
   
   <
   
   title
   
   >
   
   Demo
   
   </
   
   title
   
   >
   
   
 
   
   <
   
   meta 
   
   http-equiv
   
   ="X-UA-Compatible"
   
    content
   
   ="IE=7"
   
    
   
   />
   
   
 
   
   <
   
   link 
   
   rel
   
   ="stylesheet"
   
    href
   
   ="Contents/Style.css"
   
    type
   
   ="text/css"
   
    
   
   />
   
   

 
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
    language
   
   ="JavaScript"
   
    src
   
   ="JSClass/jquery-1.3.2.js"
   
   ></
   
   script
   
   >
   
   

 
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
    language
   
   ="JavaScript"
   
    src
   
   ="JSClass/getPos.js"
   
   ></
   
   script
   
   >
   
   

 
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
    language
   
   ="JavaScript"
   
    src
   
   ="JSClass/FusionCharts.js"
   
   ></
   
   script
   
   >
   
   

 
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
    language
   
   ="JavaScript"
   
    src
   
   ="JSClass/FusionChartsExportComponent.js"
   
   ></
   
   script
   
   >
   
   

 
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
   >
   
   
 
   
   //
   
   1、测试发现不同浏览器显示有一定差异(主要是位置略有偏移)，未针对该问题进行处理；
   
   

   
    
   
   //
   
   2、FusionCharts文档中对各种图的XML属性有详尽的说明，查阅相应图的XML说明即可快速了解。其他属性和功能都可以查看对应的文档说明。
   
   

   
   
 $(
   
   function
   
   () {
 
   
   //
   
   最后一个参数"1"用于注册脚本，使flash文件可以调用页面中的JS方法，高版本的flash player需要做安全设置
   
   

   
    
   
   var
   
    chart 
   
   =
   
    
   
   new
   
    FusionCharts(
   
   "
   
   Charts/Pie3D.swf
   
   "
   
   , 
   
   "
   
   ChartId
   
   "
   
   , 
   
   "
   
   800
   
   "
   
   , 
   
   "
   
   500
   
   "
   
   , 
   
   "
   
   0
   
   "
   
   , 
   
   "
   
   1
   
   "
   
   );
 chart.setDataURL(
   
   "
   
   Data/Pie3D.xml
   
   "
   
   );
   
   //
   
   读取数据文件
   
   

   
    
   
   //
   
   setDataXML方法则是接收XML字符串（可以使用XSLT转换XML得到符合FusionCharts相应图的XML格式的数据，也可以直接生成对应格式的XML）
   
   

   
    chart.render(
   
   "
   
   chartDiv
   
   "
   
   );
   
   //
   
   追加图到DIV，实际内容为显示flash的HTML字符串
   
   

   
   
 getDetail(
   
   "
   
   0
   
   "
   
   ); 
   
   //
   
   右侧显示详细信息的统计图
   
   

   
   
 
   
   //
   
   导出功能
   
   

   
    
   
   var
   
    myExportComponent 
   
   =
   
    
   
   new
   
    FusionChartsExportObject(
   
   "
   
   fcExporter1
   
   "
   
   , 
   
   "
   
   Charts/FCExporter.swf
   
   "
   
   );
 myExportComponent.Render(
   
   "
   
   fcexpDiv
   
   "
   
   );
 })

 
   
   function
   
    getDetail(agr) {
 
   
   //
   
   设置右侧DIV的位置
   
   

   
    
   
   var
   
    pos 
   
   =
   
    getElementPos(
   
   "
   
   chartDiv
   
   "
   
   );
 
   
   var
   
    popx 
   
   =
   
    
   
   0
   
   ;
 
   
   var
   
    popy 
   
   =
   
    
   
   0
   
   ;
 popx 
   
   =
   
    pos.x;
 popy 
   
   =
   
    pos.y;
 $(
   
   "
   
   #popupDiv
   
   "
   
   ).css(
   
   "
   
   top
   
   "
   
   , popx 
   
   +
   
    
   
   5
   
    
   
   +
   
    
   
   "
   
   px
   
   "
   
   );
 $(
   
   "
   
   #popupDiv
   
   "
   
   ).css(
   
   "
   
   left
   
   "
   
   , popy 
   
   +
   
    
   
   503
   
    
   
   +
   
    
   
   "
   
   px
   
   "
   
   );

 
   
   var
   
    myChart 
   
   =
   
    
   
   new
   
    FusionCharts(
   
   "
   
   Charts/Column2D.swf
   
   "
   
   , 
   
   "
   
   myChart
   
   "
   
   , 
   
   "
   
   300
   
   "
   
   , 
   
   "
   
   240
   
   "
   
   , 
   
   "
   
   0
   
   "
   
   , 
   
   "
   
   0
   
   "
   
   );
 myChart.setDataURL(
   
   "
   
   Data/Data.xml
   
   "
   
   );
 myChart.render(
   
   "
   
   chartDiv_Right_top
   
   "
   
   );

 
   
   var
   
    myGrid 
   
   =
   
    
   
   new
   
    FusionCharts(
   
   "
   
   Charts/SSGrid.swf
   
   "
   
   , 
   
   "
   
   myGrid1
   
   "
   
   , 
   
   "
   
   300
   
   "
   
   , 
   
   "
   
   240
   
   "
   
   , 
   
   "
   
   0
   
   "
   
   , 
   
   "
   
   0
   
   "
   
   );
 myGrid.setDataURL(
   
   "
   
   Data/Data.xml
   
   "
   
   );
 
   
   //
   
   添加参数
   
   

   
    myGrid.addVariable(
   
   '
   
   showPercentValues
   
   '
   
   , 
   
   '
   
   1
   
   '
   
   );
 myGrid.addVariable(
   
   '
   
   showShadow
   
   '
   
   , 
   
   '
   
   1
   
   '
   
   );
 myGrid.render(
   
   "
   
   gridDiv_Right_bottom
   
   "
   
   );

 $(
   
   "
   
   #popupDiv
   
   "
   
   ).slideDown(
   
   "
   
   30000
   
   "
   
   ); 
   
   //
   
   向下展开显示
   
   

   
   
 
   
   //
   
   agr可以作为参数以对应获得不同的XML，比如对应不同的XML文件，或者发送AJAX请求得到不同的XML字符串
   
   

   
    
   
   //
   
   alert(agr);
   
   

   
    }
 
   
   </
   
   script
   
   >
   
   


   
   </
   
   head
   
   >
   
   

   
   <
   
   body
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="chartDiv"
   
    align
   
   ="left"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="fcexpDiv"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="popupDiv"
   
    style
   
   ="position: absolute; z-index: 100; width: 300px; display: none;
 background-color: #D6EAFF;"
   
   >
   
   
 
   
   <
   
   div 
   
   align
   
   ="right"
   
   >
   
   
 
   
   <
   
   span 
   
   style
   
   ="cursor: pointer;"
   
    onclick
   
   ="$('#popupDiv').slideUp('30000')"
   
    title
   
   ="关闭"
   
   >
   
   
 ×
   
   </
   
   span
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="chartDiv_Right_top"
   
    style
   
   ="width: 300px; height: 240px;"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="gridDiv_Right_bottom"
   
    style
   
   ="width: 300px; height: 240px;"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   

   
   </
   
   body
   
   >
   
   

   
   </
   
   html
   
   >
  
  

完整DEMO下载：MyFusionChartsDemo.rar