extjs fusioncharts
ExtJS+FusionCharts结合的两种方法如下：
一、使用FusionCharts.js
<%@ page language="java" contentType="text/html;charset=GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//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 type="text/javascript"
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
<!DOCTYPE HTML PUBLIC "-//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>
<!-- 下面3个JS顺序不能反-->
<script type="text/javascript" src="js/uxmedia.js"></script>
<script type="text/javascript" src="js/uxflash.js"></script>
<script type="text/javascript" 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();
var panel = new Ext.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>
一、使用FusionCharts.js
<%@ page language="java" contentType="text/html;charset=GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//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 type="text/javascript"
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
<!DOCTYPE HTML PUBLIC "-//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>
<!-- 下面3个JS顺序不能反-->
<script type="text/javascript" src="js/uxmedia.js"></script>
<script type="text/javascript" src="js/uxflash.js"></script>
<script type="text/javascript" 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();
var panel = new Ext.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>