Ext+FusionCharts图形报表展示

1.html文件

 

[xhtml]  view plain copy
  1. >     
  2. <html xmlns="http://www.w3.org/1999/xhtml">     
  3. <head>     
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
  5. <title>FusionCharts图形报表展示title>     
  6. <link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" />     
  7. <mce:script type="text/javascript" src="../ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js">mce:script>     
  8. <mce:script type="text/javascript" src="../ext/ext-all.js" mce_src="ext/ext-all.js">mce:script>     
  9. <mce:script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js" mce_src="ext/build/locale/ext-lang-zh_CN.js">mce:script>     
  10. <mce:script type="text/javascript" src="js/FusionCharts.js" mce_src="js/FusionCharts.js">mce:script>     
  11. <mce:script type="text/javascript" src="js/Test.js" mce_src="js/Test.js">mce:script>      
  12. head>     
  13. <body>     
  14. body>     
  15. html>   

 

2.test.js

 

 

[javascript]  view plain copy
  1. Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';  
  2. //左边功能树     
  3. Ext.onReady(function(){     
  4.        var  win=new Ext.Window({  
  5.         title:'falsh报表展示1',  
  6.             layout:'fit',  
  7.             width:500,  
  8.             height:400,  
  9.             closeAction:'close',  
  10.             plain:true,  
  11.             html:'
'  
  •         });  
  •           
  •     var FCF_MSColumn3DPanel=new Ext.Panel({  
  •         title:'综合3D柱状图',  
  •         html:'
  • '  
  •     });  
  •     var FCF_Column3DPanel=new Ext.Panel({  
  •         title:'3D柱状图',  
  •         html:'
  • '  
  •     });  
  •     var FCF_Pie3DPanel=new Ext.Panel({  
  •         title:'3D饼状图',  
  •         html:'
  • '  
  •     });  
  •       
  •     var tabPanel=new Ext.TabPanel({  
  •             autoTabs       : true,  
  •             activeTab      : 0,  
  •             deferredRender : false,  
  •             border         : false,  
  •             items:[FCF_MSColumn3DPanel,FCF_Column3DPanel,FCF_Pie3DPanel]  
  •     });  
  •     tabPanel.on("tabchange",function(tp,p){  
  •         tp.doLayout();    
  •     })    
  •     win.add(tabPanel);  
  •     win.show();  
  •     win.on("beforedestroy",function(win){  
  •         win.show();  
  •         return false;  
  •     });  
  •   
  •   
  •         var chart1 = new FusionCharts("../SWF/FCF_MSColumn3D.swf""chart1Id""480""380""0""1");       
  •         var xml=" +  
  •                 " yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' " +  
  •                 "showAlternateHGridColor='1'font='Monaco' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='销售统计'" +  
  •                 " subcaption='机构当月销售和上月销售对比' >" +  
  •                 " +  
  •                 "   " +  
  •                 "    " +  
  •                 "      " +  
  •                 "      " +  
  •                 "      " +  
  •                 "   " +  
  •                 "   " +  
  •                 "     " +  
  •                 "     " +  
  •                 "      " +  
  •                 "      " +  
  •                 "      " +  
  •                 "  " +  
  •                 "    " +  
  •                 "     " +  
  •                 "      " +  
  •                 "      " +  
  •                 "      " +  
  •                 "      " +  
  •                 "   " +  
  •                 "";  
  •           
  •             chart1.setDataXML(xml);       
  •             chart1.render("chart1div");   
  •       
  •       
  •         var chart2 = new FusionCharts("../SWF/FCF_Column3D.swf""chart2Id""480""380""0""1");         
  •         chart2.setDataXML("");  
  •             chart2.render("chart2div");  
  •               
  •     var xml="" +  
  •             "" +  
  •             "   " +  
  •             "    " +  
  •             "    " +  
  •             "   " +  
  •             "    " +  
  •             "    " +  
  •             "";  
  •   
  •         var chart3 = new FusionCharts("../SWF/FCF_Pie3D.swf""chart3Id""480""380""0""1");        
  •         chart3.setDataXML(xml);  
  •         chart3.render("chart3div");  
  • });     
  •  

     

    3 FusionCharts.js

     

     

     

     

    [javascript]  view plain copy
    1. /** 
    2.  * FusionCharts: Flash Player detection and Chart embedding. 
    3.  * Version 1.2.3F ( 22 November 2008) - Specialized for FusionChartsFREE  
    4.  *                  Checking Flash Version >=6 and added updateChartXML() for FREE Charts. 
    5.  * Version: 1.2.3 (1st September, 2008) - Added Fix for % and & characters, scaled dimensions, fixes in to properly handling of double quotes and single quotes in setDataXML() function. 
    6.  * Version: 1.2.2 (10th July, 2008) - Added Fix for % scaled dimensions, fixes in setDataXML() and setDataURL() functions 
    7.  * Version: 1.2.1 (21st December, 2007) - Added setting up Transparent/opaque mode: setTransparent() function  
    8.  * Version: 1.2 (1st November, 2007) - Added FORM fixes for IE  
    9.  * Version: 1.1 (29th June, 2007) - Added Player detection, New conditional fixes for IE 
    10.  * 
    11.  * Morphed from SWFObject (http://blog.deconcept.com/swfobject/) under MIT License: 
    12.  * http://www.opensource.org/licenses/mit-license.php 
    13.  * 
    14.  */  
    15. if(typeof infosoftglobal == "undefined"var infosoftglobal = new Object();  
    16. if(typeof infosoftglobal.FusionChartsUtil == "undefined") infosoftglobal.FusionChartsUtil = new Object();  
    17. infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang, detectFlashVersion, autoInstallRedirect){  
    18.     if (!document.getElementById) { return; }  
    19.       
    20.     //Flag to see whether data has been set initially  
    21.     this.initialDataSet = false;  
    22.       
    23.     //Create container objects  
    24.     this.params = new Object();  
    25.     this.variables = new Object();  
    26.     this.attributes = new Array();  
    27.       
    28.     //Set attributes for the SWF  
    29.     if(swf) { this.setAttribute('swf', swf); }  
    30.     if(id) { this.setAttribute('id', id); }  
    31.   
    32.     w=w.toString().replace(//%$/,"%25");  
    33.     if(w) { this.setAttribute('width', w); }  
    34.     h=h.toString().replace(//%$/,"%25");  
    35.     if(h) { this.setAttribute('height', h); }  
    36.   
    37.       
    38.     //Set background color  
    39.     if(c) { this.addParam('bgcolor', c); }  
    40.       
    41.     //Set Quality     
    42.     this.addParam('quality''high');  
    43.       
    44.     //Add scripting access parameter  
    45.     this.addParam('allowScriptAccess''always');  
    46.       
    47.     //Pass width and height to be appended as chartWidth and chartHeight  
    48.     this.addVariable('chartWidth', w);  
    49.     this.addVariable('chartHeight', h);  
    50.   
    51.     //Whether in debug mode  
    52.     debugMode = debugMode ? debugMode : 0;  
    53.     this.addVariable('debugMode', debugMode);  
    54.     //Pass DOM ID to Chart  
    55.     this.addVariable('DOMId', id);  
    56.     //Whether to registed with JavaScript  
    57.     registerWithJS = registerWithJS ? registerWithJS : 0;  
    58.     this.addVariable('registerWithJS', registerWithJS);  
    59.       
    60.     //Scale Mode of chart  
    61.     scaleMode = scaleMode ? scaleMode : 'noScale';  
    62.     this.addVariable('scaleMode', scaleMode);  
    63.       
    64.     //Application Message Language  
    65.     lang = lang ? lang : 'EN';  
    66.     this.addVariable('lang', lang);  
    67.       
    68.     //Whether to auto detect and re-direct to Flash Player installation  
    69.     this.detectFlashVersion = detectFlashVersion?detectFlashVersion:1;  
    70.     this.autoInstallRedirect = autoInstallRedirect?autoInstallRedirect:1;  
    71.       
    72.     //Ger Flash Player version   
    73.     this.installedVer = infosoftglobal.FusionChartsUtil.getPlayerVersion();  
    74.       
    75.     if (!window.opera && document.all && this.installedVer.major > 7) {  
    76.         // Only add the onunload cleanup if the Flash Player version supports External Interface and we are in IE  
    77.         infosoftglobal.FusionCharts.doPrepUnload = true;  
    78.     }  
    79. }  
    80.   
    81. infosoftglobal.FusionCharts.prototype = {  
    82.     setAttribute: function(name, value){  
    83.         this.attributes[name] = value;  
    84.     },  
    85.     getAttribute: function(name){  
    86.         return this.attributes[name];  
    87.     },  
    88.     addParam: function(name, value){  
    89.         this.params[name] = value;  
    90.     },  
    91.     getParams: function(){  
    92.         return this.params;  
    93.     },  
    94.     addVariable: function(name, value){  
    95.         this.variables[name] = value;  
    96.     },  
    97.     getVariable: function(name){  
    98.         return this.variables[name];  
    99.     },  
    100.     getVariables: function(){  
    101.         return this.variables;  
    102.     },  
    103.     getVariablePairs: function(){  
    104.         var variablePairs = new Array();  
    105.         var key;  
    106.         var variables = this.getVariables();  
    107.         for(key in variables){  
    108.             variablePairs.push(key +"="+ variables[key]);  
    109.         }  
    110.         return variablePairs;  
    111.     },  
    112.     getSWFHTML: function() {  
    113.         var swfNode = "";  
    114.         if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) {   
    115.             // netscape plugin architecture           
    116.             swfNode = 'this.getAttribute('swf') +'" mce_src="'this.getAttribute('swf') +'" width="'this.getAttribute('width') +'" height="'this.getAttribute('height') +'"  ';  
    117.             swfNode += ' id="'this.getAttribute('id') +'" name="'this.getAttribute('id') +'" ';  
    118.             var params = this.getParams();  
    119.              for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; }  
    120.             var pairs = this.getVariablePairs().join("&");  
    121.              if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }  
    122.             swfNode += '/>';  
    123.         } else { // PC IE             
    124.             swfNode = 'this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'this.getAttribute('width') +'" height="'this.getAttribute('height') +'">';  
    125.             swfNode += 'this.getAttribute('swf') +'" />';  
    126.             var params = this.getParams();  
    127.             for(var key in params) {  
    128.              swfNode += '+ key +'" value="'+ params[key] +'" />';  
    129.             }  
    130.             var pairs = this.getVariablePairs().join("&");            
    131.             if(pairs.length > 0) {swfNode += '+ pairs +'" />';}  
    132.             swfNode += "";  
    133.         }  
    134.         return swfNode;  
    135.     },  
    136.     setDataURL: function(strDataURL){  
    137.         //This method sets the data URL for the chart.  
    138.         //If being set initially  
    139.         if (this.initialDataSet==false){  
    140.             this.addVariable('dataURL',strDataURL);  
    141.             //Update flag  
    142.             this.initialDataSet = true;  
    143.         }else{  
    144.             //Else, we update the chart data using External Interface  
    145.             //Get reference to chart object  
    146.             var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));  
    147.               
    148.             if (!chartObj.setDataURL)  
    149.             {  
    150.                 __flash__addCallback(chartObj, "setDataURL");  
    151.             }  
    152.               
    153.             chartObj.setDataURL(strDataURL);  
    154.         }  
    155.     },  
    156.     //This function :  
    157.     //fixes the double quoted attributes to single quotes  
    158.     //Encodes all quotes inside attribute values  
    159.     //Encodes % to %25 and & to %26;  
    160.     encodeDataXML: function(strDataXML){  
    161.           
    162.             var regExpReservedCharacters=["//$","//+"];  
    163.             var arrDQAtt=strDataXML.match(/=/s*/".*?/"/g);  
    164.             if (arrDQAtt){  
    165.                 for(var i=0;i
    166.                     var repStr=arrDQAtt[i].replace(/^=/s*/"|/"$/g,"");  
    167.                     repStr=repStr.replace(//'/g,"%26apos;");  
    168.                     var strTo=strDataXML.indexOf(arrDQAtt[i]);  
    169.                     var repStrr="='"+repStr+"'";  
    170.                     var strStart=strDataXML.substring(0,strTo);  
    171.                     var strEnd=strDataXML.substring(strTo+arrDQAtt[i].length);  
    172.                     var strDataXML=strStart+repStrr+strEnd;  
    173.                 }  
    174.             }  
    175.               
    176.             strDataXML=strDataXML.replace(//"/g,"%26quot;");  
    177.             strDataXML=strDataXML.replace(/%(?![/da-f]{2}|[/da-f]{4})/ig,"%25");  
    178.             strDataXML=strDataXML.replace(//&/g,"%26");  
    179.   
    180.             return strDataXML;  
    181.   
    182.     },  
    183.     setDataXML: function(strDataXML){  
    184.         //If being set initially  
    185.         if (this.initialDataSet==false){  
    186.             //This method sets the data XML for the chart INITIALLY.  
    187.             this.addVariable('dataXML',this.encodeDataXML(strDataXML));  
    188.             //Update flag  
    189.             this.initialDataSet = true;  
    190.         }else{  
    191.             //Else, we update the chart data using External Interface  
    192.             //Get reference to chart object  
    193.             var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));  
    194.             chartObj.setDataXML(strDataXML);  
    195.         }  
    196.     },  
    197.     setTransparent: function(isTransparent){  
    198.         //Sets chart to transparent mode when isTransparent is true (default)  
    199.         //When no parameter is passed, we assume transparent to be true.  
    200.         if(typeof isTransparent=="undefined") {  
    201.             isTransparent=true;  
    202.         }             
    203.         //Set the property  
    204.         if(isTransparent)  
    205.             this.addParam('WMode''transparent');  
    206.         else  
    207.             this.addParam('WMode''Opaque');  
    208.     },  
    209.       
    210.     render: function(elementId){  
    211.         //First check for installed version of Flash Player - we need a minimum of 6  
    212.         if((this.detectFlashVersion==1) && (this.installedVer.major < 6)){  
    213.             if (this.autoInstallRedirect==1){  
    214.                 //If we can auto redirect to install the player?  
    215.                 var installationConfirm = window.confirm("You need Adobe Flash Player 6 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. Please click on Ok to install the same.");  
    216.                 if (installationConfirm){  
    217.                     window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";  
    218.                 }else{  
    219.                     return false;  
    220.                 }  
    221.             }else{  
    222.                 //Else, do not take an action. It means the developer has specified a message in the DIV (and probably a link).  
    223.                 //So, expect the developers to provide a course of way to their end users.  
    224.                 //window.alert("You need Adobe Flash Player 8 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. ");  
    225.                 return false;  
    226.             }             
    227.         }else{  
    228.             //Render the chart  
    229.             var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;  
    230.             n.innerHTML = this.getSWFHTML();  
    231.               
    232.             //Added 
       compatibility  
    233.             //Check if it's added in Mozilla embed array or if already exits   
    234.             if(!document.embeds[this.getAttribute('id')] && !window[this.getAttribute('id')])  
    235.                 window[this.getAttribute('id')]=document.getElementById(this.getAttribute('id'));   
    236.                 //or else document.forms[formName/formIndex][chartId]             
    237.             return true;          
    238.         }  
    239.     }  
    240. }  
    241.   
    242. /* ---- detection functions ---- */  
    243. infosoftglobal.FusionChartsUtil.getPlayerVersion = function(){  
    244.     var PlayerVersion = new infosoftglobal.PlayerVersion([0,0,0]);  
    245.     if(navigator.plugins && navigator.mimeTypes.length){  
    246.         var x = navigator.plugins["Shockwave Flash"];  
    247.         if(x && x.description) {  
    248.             PlayerVersion = new infosoftglobal.PlayerVersion(x.description.replace(/([a-zA-Z]|/s)+/, "").replace(/(/s+r|/s+b[0-9]+)/, ".").split("."));  
    249.         }  
    250.     }else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0){   
    251.         //If Windows CE  
    252.         var axo = 1;  
    253.         var counter = 3;  
    254.         while(axo) {  
    255.             try {  
    256.                 counter++;  
    257.                 axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+ counter);  
    258.                 PlayerVersion = new infosoftglobal.PlayerVersion([counter,0,0]);  
    259.             } catch (e) {  
    260.                 axo = null;  
    261.             }  
    262.         }  
    263.     } else {   
    264.         // Win IE (non mobile)  
    265.         // Do minor version lookup in IE, but avoid Flash Player 6 crashing issues  
    266.         try{  
    267.             var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");  
    268.         }catch(e){  
    269.             try {  
    270.                 var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");  
    271.                 PlayerVersion = new infosoftglobal.PlayerVersion([6,0,21]);  
    272.                 axo.AllowScriptAccess = "always"// error if player version < 6.0.47 (thanks to Michael Williams @ Adobe for this code)  
    273.             } catch(e) {  
    274.                 if (PlayerVersion.major == 6) {  
    275.                     return PlayerVersion;  
    276.                 }  
    277.             }  
    278.             try {  
    279.                 axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");  
    280.             } catch(e) {}  
    281.         }  
    282.         if (axo != null) {  
    283.             PlayerVersion = new infosoftglobal.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));  
    284.         }  
    285.     }  
    286.     return PlayerVersion;  
    287. }  
    288. infosoftglobal.PlayerVersion = function(arrVersion){  
    289.     this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0;  
    290.     this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0;  
    291.     this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0;  
    292. }  
    293. // ------------ Fix for Out of Memory Bug in IE in FP9 ---------------//  
    294. /* Fix for video streaming bug */  
    295. infosoftglobal.FusionChartsUtil.cleanupSWFs = function() {  
    296.     var objects = document.getElementsByTagName("OBJECT");  
    297.     for (var i = objects.length - 1; i >= 0; i--) {  
    298.         objects[i].style.display = 'none';  
    299.         for (var x in objects[i]) {  
    300.             if (typeof objects[i][x] == 'function') {  
    301.                 objects[i][x] = function(){};  
    302.             }  
    303.         }  
    304.     }  
    305. }  
    306. // Fixes bug in fp9  
    307. if (infosoftglobal.FusionCharts.doPrepUnload) {  
    308.     if (!infosoftglobal.unloadSet) {  
    309.         infosoftglobal.FusionChartsUtil.prepUnload = function() {  
    310.             __flash_unloadHandler = function(){};  
    311.             __flash_savedUnloadHandler = function(){};  
    312.             window.attachEvent("onunload", infosoftglobal.FusionChartsUtil.cleanupSWFs);  
    313.         }  
    314.         window.attachEvent("onbeforeunload", infosoftglobal.FusionChartsUtil.prepUnload);  
    315.         infosoftglobal.unloadSet = true;  
    316.     }  
    317. }  
    318. /* Add document.getElementById if needed (mobile IE < 5) */  
    319. if (!document.getElementById && document.all) { document.getElementById = function(id) { return document.all[id]; }}  
    320. /* Add Array.push if needed (ie5) */  
    321. if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }}  
    322.   
    323. /* Function to return Flash Object from ID */  
    324. infosoftglobal.FusionChartsUtil.getChartObject = function(id)  
    325. {  
    326.   var chartRef=null;  
    327.   if (navigator.appName.indexOf("Microsoft Internet")==-1) {  
    328.     if (document.embeds && document.embeds[id])  
    329.       chartRef = document.embeds[id];   
    330.     else  
    331.     chartRef  = window.document[id];  
    332.   }  
    333.   else {  
    334.     chartRef = window[id];  
    335.   }  
    336.   if (!chartRef)  
    337.     chartRef  = document.getElementById(id);  
    338.     
    339.   return chartRef;  
    340. }  
    341. /* 
    342.  Function to update chart's data at client side (FOR FusionCharts vFREE and 2.x 
    343. */  
    344. infosoftglobal.FusionChartsUtil.updateChartXML = function(chartId, strXML){  
    345.     //Get reference to chart object               
    346.     var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(chartId);       
    347.     //Set dataURL to null  
    348.     chartObj.SetVariable("_root.dataURL","");  
    349.     //Set the flag  
    350.     chartObj.SetVariable("_root.isNewData","1");  
    351.     //Set the actual data  
    352.     chartObj.SetVariable("_root.newData",strXML);  
    353.     //Go to the required frame  
    354.     chartObj.TGotoLabel("/""JavaScriptHandler");   
    355. }  
    356.   
    357.   
    358. /* Aliases for easy usage */  
    359. var getChartFromId = infosoftglobal.FusionChartsUtil.getChartObject;  
    360. var updateChartXML = infosoftglobal.FusionChartsUtil.updateChartXML;  
    361. var FusionCharts = infosoftglobal.FusionCharts;  

     

    4.截图展示

     

     Ext+FusionCharts图形报表展示_第1张图片

     

     

    Ext+FusionCharts图形报表展示_第2张图片

     

     

     Ext+FusionCharts图形报表展示_第3张图片

     

    你可能感兴趣的:(EXT3,FusionCharts)