`

funsionCharts jQuery

阅读更多

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>

<script type="text/javascript" src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script>

如果要使用返回funsionCharts 使用的json数据需添加jquery.xml2json.js

/*
 * fusionChart 自动拼接XML
 * autor  
 * Date 2013年12月27日
 */


(function($) {
	$._NH_Chart = function(option) {
		var settings = {
			datas: [], //数据
			chart: "", //
			other: "", //sytle等其他xml配置
			series: [], //图例--默认自动加载
			cate: [], // 描述--默认自动加载
			color: [], //颜色不带#的颜色值
			isSliced: [], //饼图哪个切片分开[0,1......]   //单系列使用
			link: "", //添加click钻取功能
			dataFormat: "xml", //返回的数据格式,xml返回xml,json返回json默认xml
			chartType: "Single", //报表的类型  Single 单系列 Multi 多系列,Point 为散点图
			num: "999", //柱形折线组合图,默认柱形图,当值小于图例数,则显示折线,多系列图中使用
			fn_Color: "", //通过阀值控制颜色   //单系列使用
			setPro: "" //dataset中的样式
		};
		option = option || {};
		options = $.extend(true, settings, option);
		return $._NH_Chart.init(options);
	};
	$.extend($._NH_Chart, {
		init: function(options) {
			var data;
			switch (options.chartType) {
				case "Single":
					data = $._NH_Chart.fitSingleChart(options);
					break;
				case "Multi":
					data = $._NH_Chart.fitMultiChart(options)
					break;
				case "Point":
					data = $._NH_Chart.fitPointChart(options);
					break;
				default:
					break;
			}
			if (options.dataFormat === "json") {
				data = "<xml>" + data + "</xml>";
				data = $.xml2json(data)
			}
			return data;
		},
		fitSingleChart: function(opts) {
			var xml = "<chart " + opts.chart + ">\n";
			_.each(opts.datas, function(item, index) {
				var mapData = _.map(item, function(value, key) {
					return value;
				});
				xml += "<set label='" + mapData[0] + "' value='" + mapData[1] + "'";
				if (_.contains(opts.isSliced, index)) {
					xml += " isSliced='1'";
				}
				if (opts.color.length > 0) {
					xml += " color='" + opts.color[index] + "'"
				}
				if (typeof opts.fn_Color === "function") {
					xml += " color='" + opts.fn_Color(mapData[1]) + "'"
				}
				if (opts.link != "") {
					xml += " link='javascript:" + opts.link + "(\"" + mapData[0] + "\",\"" + mapData[1] + "\")'";
				}
				xml += " />\n";
			});
			xml += opts.other + "</chart>";
			return xml;
		},
		fitMultiChart: function(opts) {
			var xml = "<chart  " + opts.chart + "";
			xml += "legendBorderThickness='0'  legendBorderAlpha='0' legendShadow='0' showLegend='1' legendBgColor='072e4f'";
			xml += "divLineIsDashed='1' divLineThickness='5' formatNumberScale='0' unescapeLinks='0'";
			xml += ">\n";
			var categories = [];
			var seriesNames = [];
			//循环去重
			_.each(opts.datas, function(item) {
				var mapData = _.map(item, function(value, key) {
					return value;
				});
				if (!_.contains(categories, mapData[1])) {
					categories.push(mapData[1]);
				}
				if (!_.contains(seriesNames, mapData[0])) {
					seriesNames.push(mapData[0]);
				}
			});
			//自定义图例和 label
			if ("object" == typeof opts.series && opts.series.length > 0) {
				seriesNames = opts.series;
			}
			if ("object" == typeof opts.cate && opts.cate.length > 0) {
				categories = opts.cate;
			}

			xml += "<categories>\n";
			_.each(categories, function(category) {
				xml += "<category label = '" + category + "' />\n"
			});
			xml += "</categories>\n";

			_.each(seriesNames, function(seriesName, index) {
				if (index < opts.num) {
					xml += "<dataset color='" + opts.color[index] + "' seriesName='" + seriesName + "' showValues='0'>\n";
					_.each(categories, function(category) {
						var flag = 0;
						_.each(opts.datas, function(item) {
							var dataEach = _.map(item, function(value, key) {
								return value;
							});
							if (dataEach[0] == seriesName && dataEach[1] == category) {
								if (options.link != '') {
									xml += "<set value='" + dataEach[2] + "' link='javascript:" + opts.link + "(\"" + dataEach[0] + "\",\"" + dataEach[1] + "\",\"" + dataEach[2] + "\")'  />\n";
								} else {
									xml += "<set value='" + dataEach[2] + "'  />\n";
								}
								flag = 1;
							}
						});
						if (flag == 0) {
							xml += "<set />";
						}
					});
					xml += "</dataset>\n";
				} else {
					xml += "<dataset color='" + opts.color[index] + "' seriesName='" + seriesName + "' showValues='0' renderAs='Line'>\n";
					_.each(categories, function(category) {
						var flag = 0;
						_.each(opts.datas, function(item) {
							var dataEach = _.map(item, function(value, key) {
								return value;
							});
							if (dataEach[0] == seriesName && dataEach[1] == category) {
								xml += "<set value='" + dataEach[2] + "'/>\n";
								flag = 1;
							}
						});
						if (flag == 0) {
							xml += "<set />";
						}
					});
					xml += "</dataset>\n";
				}
			});
			xml += opts.other + "\n</chart>";
			return xml;
		},
		fitPointChart: function(opts) {


		}
	});
})(jQuery);

 暂时完成单系列和多系列的

 

分享到:
评论

相关推荐

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery-3.3.1.js和jquery-3.3.1.min.js

    jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...

    jQuery1.12.4+jQuery中文手册.rar

    **jQuery 1.12.4 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery...

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    《jQuery 1.9.1:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,以其简洁的API和强大的功能,迅速成为开发者们首选的前端工具之一。本篇文章将深入探讨jQuery 1.9.1版本,包括其核心特性、性能...

    最新版JQuery-jquery-3.2.1.min.js

    在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...

    开发工具 jquery-1.11.3.min

    开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...

    jquery1.2.3到3.3.1版本都有

    jquery1.2.3到3.3.1版本都有: jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    《jQuery 2.1.1:JavaScript 的强大库》 jQuery 是一个广泛应用于网页开发的JavaScript库,它的出现极大地简化了JavaScript的复杂性,使得网页交互变得更加简单和高效。在这个主题中,我们将深入探讨jQuery 2.1.1...

    jquery精简版jquery-small.js

    jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    《jQuery 3.0.0:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,已经成为了Web开发中不可或缺的一部分。它以其简洁的API和强大的功能,极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在...

    jquery1.7中文手册CHM文档(附jquery1.82chm手册)

    资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    《jQuery 1.11.3:核心特性与应用解析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,深受前端开发者的喜爱。在这个主题中,我们将深入探讨jQuery ...

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jquery-1.11.0+jquery-UI-1.10.4

    《jQuery 1.11.0与jQuery UI 1.10.4:经典组合的深度解析》 在Web开发领域,jQuery与jQuery UI是两个不可或缺的重要库,它们极大地简化了JavaScript的DOM操作和用户界面设计。本篇将深入探讨jQuery 1.11.0与jQuery ...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    《jQuery 1.11.1:高效前端开发的核心库》 jQuery,作为JavaScript库的代表性作品,一直以来都是Web开发者的重要工具。这个压缩包包含了两个版本的jQuery——`jquery-1.11.1.js`和`jquery-1.11.1.min.js`,它们都是...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

Global site tag (gtag.js) - Google Analytics