佣金5%代扣代缴:FusionChart 示例 参数
一.前言
在项目实施中,设计统计部分经常会使用图表进行显示,在Extjs3中内置了图表控件,但实际表现无法达到3D的美观效果,通过查找FusionChart可以实现比较美观的3D或2D图表显示。
二 实现方法
{
var mk=new Ext.LoadMask(Ext.getBody(),{
msg:'正在加载数据,请稍候!',
removeMask:true//完成后移除
});
mk.show();
Ext.Ajax.request(
{
url:"CountFileManager.asp?FileCtype=30",
success:function (response)
{
var Result=Ext.decode(response.responseText);
if(Result.flag!=0)
{
;
}else if(Result.flag==0)
{
var strXml=Result.strXML;
strXml="
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:"='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