ExtJS+FusionCharts(转)

最新推荐文章于 2024-08-19 15:26:06 发布

sjeveryday

最新推荐文章于 2024-08-19 15:26:06 发布

阅读量97

点赞数

分类专栏： JS，Jquery 文章标签： javascript ux java ViewUI

本文链接：https://blog.csdn.net/sjeveryday/article/details/84265241

版权

JS，Jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


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>