extjs fusioncharts(转载)
ExtJS+FusionCharts结合的两种方法如下：
一、使用FusionCharts.js
<%@pagelanguage="java"contentType="text/html;charset=GBK"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="content-type"content="text/html;charset=GBK">
<linkrel="stylesheet"type="text/css"
href="<%=path%>/extjs/resources/css/ext-all.css"/>
<scripttype="text/javascript"
src="<%=path%>/extjs/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="<%=path%>/extjs/ext-all.js"></script>
<scripttype="text/javascript"
src="<%=path%>/js/public/FusionCharts.js"></script>
<scripttype="text/javascript"
src="<%=path%>/js/admin/feeManage.js"></script>
</head>
<body>
<divid="content"style="width:100%;height:100%"></div>
</body>
</html>
feeManage.js的部分代码如下：
varfeeStatisticPanel=newExt.Panel({
html:"<divid='feeStatisticGraphDiv'></div>"
});
varfeeStatisticGraphWin=newExt.Window({
frame:true,
width:416,
height:333,
title:"费用统计图",
shadow:true,
modal:true,
items:[feeStatisticPanel]
});
feeStatisticGraphWin.show();
varchart=newFusionCharts("/financeWeb/swf/FCF_Pie3D.swf","chartId","400","300","0","1");
chart.setDataURL("Data.xml");
chart.render(“feeStatisticGraphDiv”);
二、使用Ext.ux.FusionPanel
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ExtJS+FusionCharts</title>
<metahttp-equiv="content-type"content="text/html;charset=GBK">
<linkrel="stylesheet"type="text/css"
href="extjs/resources/css/ext-all.css">
<scripttype="text/javascript"src="extjs/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="extjs/ext-all.js"></script>
<!--下面3个JS顺序不能反-->
<scripttype="text/javascript"src="js/uxmedia.js"></script>
<scripttype="text/javascript"src="js/uxflash.js"></script>
<scripttype="text/javascript"src="js/uxfusion.js"></script>
<scripttype="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
varpanel=newExt.ux.FusionPanel({
title:"FusionPanel",
chartURL:"swf/FCF_Pie3D.swf",
dataURL:"Data.xml",
width:300,
height:200,
mediaCfg:{
width:300,
height:200,
params:{
scale:"exactfit"
}
},
renderTo:"content"
});
});
</script>
</head>
<body>
<divid="content"align="center"style="margin-top:150px"></div>
</body>
</html>