ExtJS+FusionCharts结合的两种方法如下：
一、使用FusionCharts.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<%@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的部分代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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