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']})