注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

FusionChart在Ext中图表应用的两种方法  

2011-03-12 13:06:09|  分类: report |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图如下:

FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪

 

FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪

 

FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪

 

FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪

 

FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪

 准备所需文件如图:

FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪
在网上下载
FusionChart在Ext中图表应用的两种方法 - 风 - 风之泪
所需文件下载地址http://u.115.com/file/f793f1f3b9http://www.download3k.com/Install-FusionCharts.html,目前的最好版本是3.2的,里面含有各种图表和代码案例供你参考。
效果图源码下载地址:http://u.115.com/file/f7338ebfb6

 网上当的代码如下可做参考:

一、使用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

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>

<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();

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>

其中引入的三个js文件的顺序不能颠倒。

对于第二种方法,可以参考http://extjs.kaffill.de/site.tmp/test_fusion_looks_notsogood.html

  评论这张
 
阅读(1792)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017