ExtJS+FusionCharts

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>

 


你可能感兴趣的:(FusionCharts)