jquery.tochart.js
var _jq, _hc;
var jqsrc = "http://code.jquery.com/jquery-1.7.min.js";
var hcsrc = "http://code.highcharts.com/highcharts.js"; function checkJquery() {
if(typeof(jQuery) == "function") {
window.clearInterval(_jq);
initHighcharts();
}
}
function checkHighcharts() {
if(typeof(jQuery("body").highcharts) == "function") {
window.clearInterval(_hc);
initTochart();
}
}
function initJquery() {
if(typeof(jQuery) != "function") {
var jq = document.createElement("script");
jq.type = "text/javascript";
jq.src = jqsrc;
document.body.appendChild(jq); _jq = window.setInterval(checkJquery, 500);
} else {
initHighcharts();
}
}
function initHighcharts() {
if(typeof(jQuery("body").highcharts) != "function") {
var hc = document.createElement("script");
hc.type = "text/javascript";
hc.src = hcsrc;
document.body.appendChild(hc); _hc = window.setInterval(checkHighcharts, 500);
} else {
initTochart();
}
}
function initTochart() {
jQuery.fn.tochart = function(options) {
var defaults = {x: 0, sort: null, include: [], exclude: []};
var opts = $.extend(defaults, options); var title = {}, rtitle = {};
jQuery.each(jQuery(this).find("tr:first").find("th"), function(i, o) {
title[i] = jQuery(o).text();
rtitle[jQuery(o).text()] = i;
}); var include = [], exclude = []; if(!opts.x) opts.x = 0;
else if(typeof(opts.x) == "string") opts.x = rtitle[opts.x] || 0;
else if(!typeof(opts.x) != "number") opts.x = 0; if(opts.include instanceof Array) {
for(var i = 0; i < opts.include.length; i++) {
var c = opts.include[i];
if(typeof(c) == "number") include.push(c);
else if(typeof(c) == "string" && rtitle[c] != undefined) include.push(rtitle[c]);
}
} if(opts.exclude instanceof Array) {
for(var i = 0; i < opts.exclude.length; i++) {
var c = opts.exclude[i];
if(typeof(c) == "number") exclude.push(c);
else if(typeof(c) == "string" && rtitle[c] != undefined) exclude.push(rtitle[c]);
}
} var rows = jQuery(this).find("tr");
if(typeof(opts.sort) == "boolean") {
rows.sort(function(a, b) {
return jQuery(a).find("td:eq(" + opts.x + ")").text().localeCompare(jQuery(b).find("td:eq(" + opts.x + ")").text()) * (opts.sort ? 1 : -1);
});
} var data = {};
jQuery.each(rows, function(i, o) {
jQuery.each(jQuery(o).find("td"), function(j, p) {
if(data[j] == undefined) {
data[j] = [];
}
if(j == opts.x) {
data[j].push(jQuery(p).text());
} else if(!isNaN(jQuery(p).text())) {
data[j].push(parseFloat(jQuery(p).text()));
} else {
data[j].push(0);
}
});
}); var ys = [];
for(var c in title) {
var i = parseInt(c);
if(i != opts.x && (include.length == 0 || include.indexOf(i) != -1) && (exclude.length == 0 || exclude.indexOf(i) == -1)) {
ys.push({name: title[i], data: data[i]});
}
} jQuery("body").append("<div id=\"__chart\" style=\"display: block;\"></div>");
jQuery("#__chart").highcharts({
title: {
text: ""
},
credits: {
enabled: false
},
xAxis: {
categories: data[opts.x]
},
series: ys,
tooltip: {
formatter: function() {
return this.x + "<br />" + this.series.name + ": " + this.y;
}
}
});
}
} initJquery();
用法: $('table').tochart({x:'日期',sort:true,exclude:['ID']})
jquery.tochart.js的更多相关文章
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 初探jquery.slimscroll.js和iscroll5.js
网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- Android开发之发送短信
本实例通过SmsManager的sendTextMessage方法实现发送短信关于SmsManager的具体解释大家能够參照:Android开发之SmsManager具体解释 实例执行效果图: 程序代 ...
- js解析json,js转换json成map,获取map的key,value
json串格式 { "10.10.11.1": { "target_1": "34.2", "target_3": &q ...
- [SVG] Simple introduce for SVG
Just like create html page, you can create a svg tag by: <?xml version="1.0" encoding=& ...
- Python-xml解析常用方法简介
[XML几种解析方法] 常见的XML编程接口有DOM和SAX,这两种接口处理XML文件的方式不同,使用场合自然也就不同. Python有三种方法解析XML: SAX,DOM,以及ElementTree ...
- jquery之checkbox
//checkbox 数据回显 var publishRange=rowData.publishRange.split(","); for(var i = 0;i < pub ...
- C复习手记(Day2)
1.共用体 共用体是一种特殊的结构,允许在相同的位置存储不同的数据类型.可以定义一个带有多成员的共同体,但是任何时候只能有一个成员带有值. 定义共用体: union Data { int i; flo ...
- javascript正则
<script type="text/javascript"> //去除两边空格,如果要去除所有空格,使用/\s*即可/ String.prototype.trim ...
- 前端笔试题目小结--获取输入参数用户名;查询URL字符串参数
编写一个JavaScript函数getSuffix,用于获得输入参数的后缀名.如输入abc.txt,返回txt. str1 = "abc.txt"; function getSuf ...
- 使用F#开发量化模型都缺什么?
量化模型多数是基于统计的,因此,统计运算库应该是必备的.在Matlab.R中包含了大量的统计和概率运算,可以说拿来就用,非常方便,相比之下,F#的资源就很少了,这里给大家提供几个链接,可以解决一部分问 ...
- (转)Facade模式
Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Facade模式的Fac ...