ExtJS+FusionCharts结合的两种方法如下：
一、使用FusionCharts.js
<%@pagelanguage="java" contentType="text/html;charset=GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme() +"://"+ request.getServerName() +":"+ request.getServerPort()+ path +"/"; %> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="content-type" content="text/html;charset=GBK"> <link rel="stylesheet"type="text/css" href="<%=path%>/extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="<%=path%>/extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="<%=path%>/extjs/ext-all.js"></script> <script src="<%=path%>/js/public/FusionCharts.js"></script> <script type="text/javascript" src="<%=path%>/js/admin/feeManage.js"></script> </head> <body> <div id="content"style="width: 100%; height: 100%"></div> </body> </html>
feeManage.js的部分代码如下：
var feeStatisticPanel = new Ext.Panel(
{
html: "<div id='feeStatisticGraphDiv'></div>"
});
var feeStatisticGraphWin = new Ext.Window(
{
frame: true,
width: 416,
height: 333,
title: "费用统计图",
shadow: true,
modal: true,
items: [feeStatisticPanel]
});
feeStatisticGraphWin.show();
var chart = new FusionCharts("/financeWeb/swf/FCF_Pie3D.swf", "chartId", "400", "300", "0", "1");
chart.setDataURL("Data.xml");
chart.render("feeStatisticGraphDiv");
二、使用Ext.ux.FusionPanel
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ExtJS+FusionCharts</title>
<meta http-equiv="content-type" content="text/html;charset=GBK">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="js/uxmedia.js"></script>
<script src="js/uxflash.js"></script>
<script src="js/uxfusion.js"></script>
<script type="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>
<div id="content" align="center" style="margin-top:'150px">
</div>
</body>
</html>
其中红色标注的三个js文件的引入顺序不能颠倒。
对于第二种方法，可以参考
http://extjs.kaffill.de/site.tmp/test_fusion_looks_notsogood.html