`
wangju19870301
  • 浏览: 36426 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

ExtJS+FusionCharts结合的两种方法

EXTJavaScriptCSSHTMLCache
阅读更多

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>

       <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>

 

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

 

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

相关文件在附件中。

分享到：
| 采用EasyMock对Struts2的action进行测试
评论
1 楼 liuzk86 2010-01-22  
请问楼主有没有曲线图表的相关例子，也发一个上来好吗？曲线图表才比较常用！谢谢..
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics