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>
分享到：
相关推荐
标题中的“ExtJS+FusionCharts结合的两种方法”是指在Web开发中，如何将ExtJS框架与FusionCharts图表库结合起来使用，以实现交互式的、数据丰富的可视化界面。ExtJS是一个强大的JavaScript库，用于构建复杂的用户...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中，财务管控系统的构建至关重要，它能够帮助企业高效管理财务数据，提高运营效率，确保财务安全。本文将深入探讨如何利用Extjs、...
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码：主要运用了一下的知识： 1、主要运用的后台框架是extjs， 2、jsp+hibernate+Struts2+spring+ajax+jQuery， 3、用到了Java面向对象的...
ExtJS + ASP.NET 后台管理框架是一种高效且灵活的开发模式，用于构建企业级的Web应用程序，尤其适合后台管理系统。这个框架结合了JavaScript库ExtJS的前端交互性和ASP.NET的强大后端处理能力，提供了丰富的用户界面...
网上有些这样的例子，但是下了几个都没有跑起来，哎，希望那些发文章的人要发就发全的，别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传，没法上传图片无法看到效果，直接上源码吧。
总结起来，"DWR+extjs+spring+hibernate"的组合是现代Web应用开发的一个强大工具集，它能够帮助开发者快速构建出交互性强、性能优异的企业级应用。通过深入理解和熟练掌握这四个技术，可以显著提升开发者的技能水平...
在"ssh+extjs+mysql整合"中，我们将SSH框架与ExtJS前端技术和MySQL数据库结合起来，构建一个完整的Web应用。以下是对这个整合过程的详细说明： 1. **Spring**：Spring作为核心框架，负责管理应用程序的各个组件，...
extJs 跟mxgraph一样都是一种前台框架，可以混着用，这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器（container），并在此容器中画图的，而extJs也是将此容器包装成一个window...
EXTJS、Structs和MySQL是三个在Web开发中常见的技术组件，它们共同构成了一个完整的前后端数据交互系统。EXTJS是一种强大的JavaScript库，用于构建富客户端应用；Structs是基于Spring MVC模式的Java Web框架，常用于...
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南
ExtJs+4.1.0_API[中文版]
综上所述，EXTJS+SSH 构建的登录系统涉及到前端交互设计、后端业务处理和数据库操作等多个环节，是一个完整的Web应用开发实例。这种架构能够提供高效、稳定且易于维护的登录解决方案，适用于各种规模的企业应用。
标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践，涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面，Java作为服务器端...
EXTJS+PHP房屋中介管理系统是一种基于前端EXTJS框架和后端PHP编程语言，结合MySQL数据库构建的实用型应用。EXTJS是一种强大的JavaScript库，专用于创建富客户端的Web应用程序，而PHP是广泛应用的服务器端脚本语言，...
标题 "Extjs + Spring MVC + hibernate + mysql" 涉及的是一个综合性的Web应用程序开发框架，结合了前端UI库、后端MVC框架、ORM工具和关系型数据库。让我们详细了解一下这些技术及其在实际项目中的应用。 1. ExtJS...
EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统
标题中的“ExtJs+java(SSH)项目源码”指的是一个综合了前端ExtJs框架和后端Java SSH（Struts2、Spring、Hibernate）框架的实际项目源代码。这个项目源码提供了一个完整的开发实例，可以帮助开发者深入理解如何将这...