一 前言:   
 
   
 
     
  
  
   
   
在项目实施中,设计统计部分经常会使用图表进行显示,在Extjs3中内置了图表控件,但实际表现无法达到3D的美观效果,通过查找FusionChart可以实现比较美观的3D或2D图表显示。
 二 实现方法
  function _Count()
{
var mk=new Ext.LoadMask(Ext.getBody(),{
msg:'正在加载数据,请稍候!',
removeMask:true//完成后移除
});
mk.show();
Ext.Ajax.request(
{
url:"CountFileManager.asp?FileCtype=30",  //后台返回Chart需要的数据
success:function (response)
{
var Result=Ext.decode(response.responseText);
if(Result.flag!=0)
{
;
}else if(Result.flag==0)
{
var strXml=Result.strXML;
strXml="<chart caption='发布文件统计'subCaption='按发布单位统计' xAxisName='单位' yAxisName='文件数' rotateYAxisName='1' showValues='1' decimalPrecision='0' showNames='1' baseFontSize='12' outCnvBaseFontSiz='20'numberSuffix=' 个'  pieSliceDepth='30'formatNumberScale='0'>"+strXml+"</chart>"; //构造FusionChart需要的XML格式数据,这里面属性,可参考官方文件。
var fusionPanel=new Ext.ux.Chart.Fusion.Panel({
collapsible:false,
chartCfg:{
id:'chart1',
params:{
flashVars:{
debugMode:0,
lang:'EN'
}
}
},
autoScroll:true,
id:'chartpanel',
chartURL:'charts/Column3D.swf',//定义图表显示类型,例如:直方,饼图等 dataXML:strXml,
width:500,
height:310
});
var Fwin=new Ext.Window(
{
name:'Fwin',
width:'520',
height:'330',
layout:'fit',
closeAction:'close',
title:'统计图表显示',
buttonAlign:'center',
resizable:true,
modal:true,
items:[fusionPanel],
buttons:[
{
text:'退出',
iconCls:'icon_exit',
handler:function(){Fwin.close();}
}]
});
mk.hide();
Fwin.show();
}
},
failure:function (response)
{
mk.hide();
Ext.Msg.alert("提示","服务器请求错误,请稍后再试!");
}
});
}服务器端返回字符:
 {success:true,flag:0,strXML:"<set name='动力TEAM' value='1' /><set name='行政人事部' value='1' /><set name='研发中心' value='117' /><set name='运管部' value='38' /><set name='制造部' value='34' /><set name='资产财务部' value='1' />'"}
三、部分FusionChart属性说明:(转摘至其他网站,供参考!)
 FusionCharts参数说明
 功能特性
 animation  
 showNames  
 rotateNames  
 showValues  
 yAxisMinValue  
 yAxisMaxValue  
 showLimits  
 showColumnShadow  
 showAlternateHGridColor 是否隔行显示不同颜色
 图表标题和轴名称
 caption  
 subCaption  
 xAxisName  
 yAxisName  
 imageSave='1'  
 imageSaveURL='Path/FusionChartsSave.jsp '图片路径
 hoverCapSepChar=','。鼠标放到柱面上时显示的提示信息的分隔符
 showhovercap='1'  
 hoverCapBgColor=‘ffffff’提示信息背景颜色
 图表和画布的样式
 bgColor  
 canvasBgColor  
 canvasBgAlpha  
 canvasBorderColor  
 canvasBorderThickness  
 shadowAlpha  
 showLegend  
 字体属性
 baseFont  
 baseFontSize  
 baseFontColor  
 outCnvBaseFont  
 outCnvBaseFontSize  
 outCnvBaseFontColor  
 分区线和网格
 numDivLines  
 divLineColor  
 divLineThickness  
 divLineAlpha  
 showAlternateHGridColor  
 alternateHGridColor  
 alternateHGridAlpha  
 showDivLineValues  
 numVDivLines  
 vDivLineColor  
 vDivLineThickness  
 vDivLineAlpha  
 showAlternateVGridColor  
 alternateVGridColor  
 alternateVGridAlpha  
 数字格式
 numberPrefix  
 numberSuffix  
 formatNumberScale  
 decimalPrecision  
 divLineDecimalPrecision  
 limitsDecimalPrecision  
 formatNumber  
 decimalSeparator  
 thousandSeparator  
 Tool- tip/Hover标题
 showhovercap  
 hoverCapBgColor  
 hoverCapBorderColor  
 hoverCapSepChar  
 折线图的参数
 lineThickness  
 anchorRadius  
 anchorBgAlpha  
 anchorBgColor  
 anchorBorderColor  
 Set标签使用的参数
 value  
 color  
 link  
 name  
 showFCMenuItem='0' 设置右键显示不显示
 1. varmyChart=newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId","600", "
 500");
 第一个参数是SWF 文件的地址。
 第二个是图形的id。这个id 你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有
 多个图形的时候,这个id 一定要是唯一的。
 第三个参数是图形的宽。
 第四个参数是图形的高。
 我们还要设置数据文件的地址。
 1. myChart.setDataURL("Data.xml");
 最后,我们把图形渲染在指定的地方。
 1. myChart.render("chartdiv");
 "chartdiv"就是前面的DIV 的id,这就表示把图形render 到"chartdiv"。
 现在你运行JSChart.html,你会看到同Chart.html 一样的效果。很显然使用JavaScript加载
 图形,更方便,更直观。
 如果你想在一个新的窗口打开页面,只需要在连接的前面加上“n-”,就像下面的代码一样:
 1. <graph caption='Monthly Sales Summary'subcaption='For the year 2006 '
 2. xAxisName='Month' yAxisName='Sales'numberPrefix='$'>
 3. <set name='Jan' value='1 7400'link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8'/>
 XML数据节点和常用属性详解
 caption=‘标题‘
 subcaption=‘子标题‘
 clickURL=‘abc.jsp‘ 点击整个图表时跳转到abc.jsp
 xAxisName=部门‘
 numberPrefix =‘¥’ 数据前缀单位
 numberSuffix =‘个’ 数据后缀单位 
 Decimals=‘2’ 保留两位小数,四舍五入
 forceDecimals=‘2’ 强制保留两位小数,对于5.1转换为5.10 
 yAxisName=‘完成率’ 
 如果使用汉字汉符需加属性:rotateYAxisName=‘1’
 showValues=‘1’
 yAxisMaxValue=‘100’ 
 对于百分比的常用bgColor='999999,FFFFFF‘
 渐变bgColor=‘999999 ’ 单色
 useRoundEdges=‘1’ 光线效果
 baseFont=‘宋体‘
 baseFontSize='12' 
 baseFontColor='333333'