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>
分享到:
相关推荐
NULL 博文链接:https://wangju19870301.iteye.com/blog/571485
Extjs+SpringMVC+MyBaits财务管控系统
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
EXTJS + Struct +mysql 数据库脚本包含在类 json实现前台后台数据通信
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
ssh+extjs+mysql整合
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
Extjs+java+swf多文件上传进度条显示项目 采用了swf插件 后端使用java servlet 项目简单使用 页面美观,希望能多交流
一个不错的Extjs + ASP.net 后台管理框架,适用编写后台的朋友们, 含源码,后台菜单导航结合xml,数据源为xml文件。这是本人网上找的,稍作修改过,下载了的朋友可自行修改内容。
ExtJs+java(SSH)项目实战源码,代码很全,很实用,对学习ExtJs和JAVA框架都很有帮助.
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南
简单的Extjs+Struts整合的图书管理系统,实现图书的新增、修改、删除
JavaWeb+Extjs+springMvc+mybatis做的信息管理系统,主要是用Extjs实现前台,其中包括了树形结构和基本的表单和列表等,springMVC框架,数据库操作层使用的是mybatis,其中的数据库表结构可以根据其中的mapper.xml...
ExtJs+4.1.0_API[中文版]
extjs+mysql实例下载extjs+mysql实例下载extjs+mysql实例下载extjs+mysql实例下载extjs+mysql实例下载
extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...
利用dwr,整合extjs,spring,hibernate.是你学习dwr的参考指南
EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统
extjs+demo+apiextjs+demo+apiextjs+demo+apiextjs+demo+api