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);
});

 

 

 

评论

1 楼 shot_big 2012-08-17  

//图表相关属性设置
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: 参数数组设置图表的横纵名称等
*/
var $ww={'学生':80,'教师':5};

$.loadCharts($ww,"Column3D","chartdiv",params);


为什么我这样调用不行？