JQuery插件——flash图表组件
fusioncharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,fusioncharts可用于任何网页脚本语言如, HTML格式,JSP技术等等。提供交互式和强大的动态图标,fusioncharts充分利用流体美丽的Flash为模板,使用XML作为其数据接口,创造紧凑,互动和真正的动态图表
现结合 jquery 封装成组件,方便调用。
该组件包括
jquery-1.3.2.min.js; (jquery核心类库)
jquery.flash.js: (flash 类)
flashdemo.js (js与html 分离)
flashdemo.html
swf 文件(Column3D.swf、Line.swf、Pie3D.swf)
运行效果图:
具体实现如下:
jquery.flash.js
注意点:swf文件路径的配置353行
$.extend({ /*参数说明 dataSource : url请求(返回json对象) charttype: 图表类型 柱状、饼图、折线等 containerDiv: 装载flash容器的div params: 参数数组设置图表的横纵名称等 */ loadCharts:function(dataSource,charttype,containerDiv,params) { // 加载fusioncharts 对象 if(typeof infosoftglobal == "undefined") var infosoftglobal = new Object(); if(typeof infosoftglobal.FusionChartsUtil == "undefined") infosoftglobal.FusionChartsUtil = new Object(); infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang, detectFlashVersion, autoInstallRedirect){ if (!document.getElementById) { return; } this.initialDataSet = false; // Create container objects this.params = new Object(); this.variables = new Object(); this.attributes = new Array(); // Set attributes for the SWF if(swf) { this.setAttribute('swf', swf); } if(id) { this.setAttribute('id', id); } if(w) { this.setAttribute('width', w); } if(h) { this.setAttribute('height', h); } // Set background color if(c) { this.addParam('bgcolor', c); } // Set Quality this.addParam('quality', 'high'); // Add scripting access parameter this.addParam('allowScriptAccess', 'always'); // Pass width and height to be appended as chartWidth and chartHeight this.addVariable('chartWidth', w); this.addVariable('chartHeight', h); // Whether in debug mode debugMode = debugMode ? debugMode : 0; this.addVariable('debugMode', debugMode); // Pass DOM ID to Chart this.addVariable('DOMId', id); // Whether to registed with JavaScript registerWithJS = registerWithJS ? registerWithJS : 0; this.addVariable('registerWithJS', registerWithJS); // Scale Mode of chart scaleMode = scaleMode ? scaleMode : 'noScale'; this.addVariable('scaleMode', scaleMode); // Application Message Language lang = lang ? lang : 'EN'; this.addVariable('lang', lang); // Whether to auto detect and re-direct to Flash Player installation this.detectFlashVersion = detectFlashVersion?detectFlashVersion:1; this.autoInstallRedirect = autoInstallRedirect?autoInstallRedirect:1; // Ger Flash Player version this.installedVer = infosoftglobal.FusionChartsUtil.getPlayerVersion(); if (!window.opera && document.all && this.installedVer.major > 7) { // Only add the onunload cleanup if the Flash Player version // supports // External Interface and we are in IE infosoftglobal.FusionCharts.doPrepUnload = true; } } infosoftglobal.FusionCharts.prototype = { setAttribute: function(name, value){ this.attributes[name] = value; }, getAttribute: function(name){ return this.attributes[name]; }, addParam: function(name, value){ this.params[name] = value; }, getParams: function(){ return this.params; }, addVariable: function(name, value){ this.variables[name] = value; }, getVariable: function(name){ return this.variables[name]; }, getVariables: function(){ return this.variables; }, getVariablePairs: function(){ var variablePairs = new Array(); var key; var variables = this.getVariables(); for(key in variables){ variablePairs.push(key +"="+ variables[key]); } return variablePairs; }, getSWFHTML: function() { var swfNode = ""; if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" '; swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" '; var params = this.getParams(); for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; } var pairs = this.getVariablePairs().join("&"); if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; } swfNode += '/>'; } else { // PC IE swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">'; swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />'; var params = this.getParams(); for(var key in params) { swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />'; } var pairs = this.getVariablePairs().join("&"); if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';} swfNode += "</object>"; } return swfNode; }, setDataURL: function(strDataURL){ // This method sets the data URL for the chart. // If being set initially if (this.initialDataSet==false){ this.addVariable('dataURL',strDataURL); // Update flag this.initialDataSet = true; }else{ // Else, we update the chart data using External Interface // Get reference to chart object var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id')); chartObj.setDataURL(strDataURL); } }, setDataXML: function(strDataXML){ // If being set initially if (this.initialDataSet==false){ // This method sets the data XML for the chart INITIALLY. this.addVariable('dataXML',strDataXML); // Update flag this.initialDataSet = true; }else{ // Else, we update the chart data using External Interface // Get reference to chart object var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id')); chartObj.setDataXML(strDataXML); } }, setTransparent: function(isTransparent){ // Sets chart to transparent mode when isTransparent is true // (default) // When no parameter is passed, we assume transparent to be true. if(typeof isTransparent=="undefined") { isTransparent=true; } // Set the property if(isTransparent) this.addParam('WMode', 'transparent'); else this.addParam('WMode', 'Opaque'); }, render: function(elementId){ // First check for installed version of Flash Player - we need a // minimum // of 8 if((this.detectFlashVersion==1) && (this.installedVer.major < 8)){ if (this.autoInstallRedirect==1){ // If we can auto redirect to install the player? var installationConfirm = window.confirm("You need Adobe Flash Player 8 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. Please click on Ok to install the same."); if (installationConfirm){ window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"; }else{ return false; } }else{ // Else, do not take an action. It means the developer has // specified a message in the DIV (and probably a link). // So, expect the developers to provide a course of way to // their // end users. // window.alert("You need Adobe Flash Player 8 (or above) to // view the charts. It is a free and lightweight // installation // from Adobe.com. "); return false; } }else{ // Render the chart var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId; n.innerHTML = this.getSWFHTML(); // Added <FORM> compatibility // Check if it's added in Mozilla embed array or if already // exits if(!document.embeds[this.getAttribute('id')] && !window[this.getAttribute('id')]) window[this.getAttribute('id')]=document.getElementById(this.getAttribute('id')); // or else document.forms[formName/formIndex][chartId] return true; } } } /* ---- detection functions ---- */ infosoftglobal.FusionChartsUtil.getPlayerVersion = function(){ var PlayerVersion = new infosoftglobal.PlayerVersion([0,0,0]); if(navigator.plugins && navigator.mimeTypes.length){ var x = navigator.plugins["Shockwave Flash"]; if(x && x.description) { PlayerVersion = new infosoftglobal.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split(".")); } }else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0){ // If Windows CE var axo = 1; var counter = 3; while(axo) { try { counter++; axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+ counter); PlayerVersion = new infosoftglobal.PlayerVersion([counter,0,0]); } catch (e) { axo = null; } } } else { // Win IE (non mobile) // Do minor version lookup in IE, but avoid Flash Player 6 crashing // issues try{ var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7"); }catch(e){ try { var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6"); PlayerVersion = new infosoftglobal.PlayerVersion([6,0,21]); axo.AllowScriptAccess = "always"; } catch(e) { if (PlayerVersion.major == 6) { return PlayerVersion; } } try { axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); } catch(e) {} } if (axo != null) { PlayerVersion = new infosoftglobal.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(",")); } } return PlayerVersion; } infosoftglobal.PlayerVersion = function(arrVersion){ this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0; this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0; this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0; } // ------------ Fix for Out of Memory Bug in IE in FP9 ---------------// /* Fix for video streaming bug */ infosoftglobal.FusionChartsUtil.cleanupSWFs = function() { var objects = document.getElementsByTagName("OBJECT"); for (var i = objects.length - 1; i >= 0; i--) { objects[i].style.display = 'none'; for (var x in objects[i]) { if (typeof objects[i][x] == 'function') { objects[i][x] = function(){}; } } } } // Fixes bug in fp9 if (infosoftglobal.FusionCharts.doPrepUnload) { if (!infosoftglobal.unloadSet) { infosoftglobal.FusionChartsUtil.prepUnload = function() { __flash_unloadHandler = function(){}; __flash_savedUnloadHandler = function(){}; window.attachEvent("onunload", infosoftglobal.FusionChartsUtil.cleanupSWFs); } window.attachEvent("onbeforeunload", infosoftglobal.FusionChartsUtil.prepUnload); infosoftglobal.unloadSet = true; } } /* Add document.getElementById if needed (mobile IE < 5) */ if (!document.getElementById && document.all) { document.getElementById = function(id) { return document.all[id]; }} /* Add Array.push if needed (ie5) */ if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }} /* Function to return Flash Object from ID */ infosoftglobal.FusionChartsUtil.getChartObject = function(id) { var chartRef=null; if (navigator.appName.indexOf("Microsoft Internet")==-1) { if (document.embeds && document.embeds[id]) chartRef = document.embeds[id]; else chartRef = window.document[id]; } else { chartRef = window[id]; } if (!chartRef) chartRef = document.getElementById(id); return chartRef; } /* Aliases for easy usage */ var getChartFromId = infosoftglobal.FusionChartsUtil.getChartObject; var FusionCharts = infosoftglobal.FusionCharts; // 验证参数 if( dataSource == null ||dataSource == "" || charttype == null || charttype == "" || containerDiv == null || containerDiv ==""){ alert("数据源,统计图类型和装载容器为必填项,请输入!"); return false; } if(params == null) params = new Object(); // 初始化参数 initialize(params); // 发送请求 $.getJSON(dataSource, function(data){ var dataXML = "<chart caption='"+ params.caption +"' xAxisName='"+ params.xAxisName + "' yAxisName='"+params.yAxisName + "' baseFont='Arial' baseFontSize='12' baseFontColor='000000'"+ "showValues='0' decimals='0' formatNumberScale='0'>"; $.each(data.items,function(i,v){ for(var key in v){ dataXML += "<set label='"+key+"' value='"+v[key]+"' />"; //dataXML += "<set label='学生' value='80' />"; } }); dataXML += "</chart>"; showChart(dataXML,charttype,containerDiv,params); }); // initialize param function initialize(params){ params.caption = params.caption != null && params.caption != "" ? params.caption : "统计图"; params.xAxisName = params.xAxisName != null && params.xAxisName != "" ? params.xAxisName : "名称"; params.yAxisName = params.yAxisName != null && params.yAxisName != "" ? params.yAxisName : "数量"; params.width = params.width != null && params.width != "" ? params.width : "100%"; params.height = params.height != null && params.height != "" ? params.height : "100%"; params.chartId = params.chartId != null && params.chartId != "" ? params.chartId : "chart_id"; } // show chart function showChart(dataXML,charttype,containerDiv,params){ charttype = charttype == "Column3D" ? "Column3D" : charttype == "Pie3D" ? "Pie3D" : "Line"; // swf文件路径 var charturl = "javascripts/swf/"; var myChart = new FusionCharts(charturl+charttype+".swf",params.chartId,params.width,params.height,"0","0"); myChart.setDataXML(dataXML); myChart.render(containerDiv); } } });
flashdemo.html
flash 加载容器div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>flash demo</title>
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.flash.js"></script>
<script type="text/javascript" src="javascripts/flashdemo.js"></script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
end...
flashdemo.js
dom加载完成后执行
$(function(){ //图表相关属性设置 var params = new Object(); params.caption = "统计图"; params.xAxisName = "名称"; params.yAxisName = "数量"; params.chartId = "chart_da"; params.width = "100%"; params.height = "100%"; /*参数说明 参数1 : url请求(返回json对象 如{'学生':80,'教师':5}) 参数2: 图表类型 Column3D、Pie3D、Line等 参数3: 装载flash容器的div 参数4: 参数数组设置图表的横纵名称等 */ $.loadCharts('action',"Column3D","chartdiv",params); //$.loadCharts('',"Pie3D","chartdiv",params); });