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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- Javascript:getElementsByClassName
背景: 由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况,所以,这里舍弃了原生的方法调用 方法一: function getElement ...
- 苹果推送APNS总结 (
开发状态服务器地址 gateway.sandbox.push.apple.com 2195产品状态服务器地址 gateway.push.apple.com 2195 Developme ...
- sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决)
sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决) 出现此错误主要是因为.sql的脚本文件过大(一般都超过100M)造成内存无法 ...
- django: template - built-in tags
本节介绍模板中的内置标签:if for 承上文,修改 views.py 如下: from django.shortcuts import render_to_response class Person ...
- a标签调用js的几种方法
我们常用的在a标签中有点击事件: <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScrip ...
- asp.net验证控件注意事项
1.如果触发某个控件事件是只对指定验证控件进行验证,可以将验证控件和被触发控件放到到一个ValidationGroup中.比如点提交按钮的时候,验证文本框,可以将提交按钮和验证控件放到一个Valida ...
- (转)JSON 之FastJson解析
一.阿里巴巴FastJson是一个Json处理工具包,包括“序列化”和“反序列化”两部分,它具备如下特征:速度最快,测试表明,fastjson具有极快的性能,超越任其他的Java Json parse ...
- FineUI添加隐藏标题
添加隐藏标题 窗体前台: <x:Button ID="btnShowHideHeader" runat="server" Icon="Secti ...
- angular 指令 要点解析
指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict = 'AECM' 分别指该指令标识位于 attribute属性: < ...
- POJ3111 K Best(另类背包+二分+变态精度)
POJ3111 K Best,看讨论区说数据有点变态,精度要求较高,我就直接把循环写成了100次,6100ms过,(试了一下30,40都会wa,50是4000ms) 第一次在POJ上看到下面这种东西还 ...