Extjs中使用图表FusionChart,图表的类型在定义Ext.ux.Chart.Fusion.Panel时,通过属性chartURL来设置图表类型,例如:
var o;
this.chartData = xml;
this.dataURL = null;
if( immediate !== false && (o = this.getInterface())){
if( 'setDataXML' in o ){
o.setDataXML(xml);
} else { //FC Free Interface
this.setVariable("_root.dataURL","");
//Set the flag
this.setVariable("_root.isNewData","1");
//Set the actual data
this.setVariable("_root.newData",xml);
//Go to the required frame
if('TGotoLabel' in o){
o.TGotoLabel("/", "JavaScriptHandler");
}
}
}
o = null;
return this;
},
setChartUrl : function(Url){ //增加变更图表类型的函数,哈哈简单吧
this.chartURL = Url;
this.refreshMedia();
},
var fusionPanel=new Ext.ux.Chart.Fusion.Panel({
collapsible:false,
chartCfg:{
id:'chart1',
params:{
flashVars:{
debugMode:0,
lang:'EN'
}
}
},
autoScroll:true,
loadMask:true,
mediaMask:true,
id:'chartpanel',
chartURL:'charts/Pie3D.swf', //定义图表类型
dataXML:strXml,
width:500,
height:310
...
如果在图表显示之后,需要变更图表类型,笔者查看了uxfusion.js,没有发现类似setChartUrl功能的函数,通过摸索,可以自行增加类似函数,实现动态变更图表类型的:
代码(uxfusion.js中增加):
setChartData : function(xml, immediate){
...
使用方法就很简单了,举例: