表到jquery中的水平条形图
我有一张桌子：
1-joe-234 2-bob-432 3-sean-654 我想拿它并用它制作一个条形图。
并不是网上没有lib，而是原型或flash xml文件。
–
我正在研究的解决方案是一个jquery插件，它将为谷歌图表生成一个html链接…不是很漂亮，但KISS（非常简单）和丑陋。
–
这是我的灵感之一： http ： //www.dumpsterdoggy.com/articles/？ jquery -horizontal-bar -graph
这完全是JavaScript，所以如果你有其他格式的数据，你首先必须转换为JS：
刚刚在Opera 10中编写和测试过。
当然，如果你在一个单独的文件中调整所有可能的CSS规则会更好，例如漂亮的背景，条形图之间的边距，文本颜色等，但这只是一个演示。
不，这不是我要求的….它应该从html表中检索数据
这是我的代码……没完成..
jQuery.fn.horizontalTableGraph = function() { $(this).find("thead").remove(); var maxvalue = 0; $(this).find("tr").each(function(i) { $(this).removeClass(); $(this).find("td").eq(0).animate({width : '50px'}, 1000); $(this).find("td").eq(1).animate({width : '150px'}, 1000).css("text-align","left"); $(this).find("td").eq(1).css("width","500px"); var getvalue = $(this).find("td").eq(2).html(); maxvalue = Math.max(maxvalue,getvalue); }); $(this).find("tr").each(function(i) { var thevalue = $(this).find("td").eq(2).html(); var newBar = $("").html(thevalue); newBar.css({ "display": "block", "width": "0px", "backgroundColor": "#600", "marginBottom": "5px", "padding": "2px", "color": "#FFF" }); //$(this).find("td").eq(2).hide(); $(this).find("td").eq(2).append(newBar); newBar.animate({"width": (100 * thevalue / maxvalue) + "%"}, "slow"); }) };
这是最终结果http://acecrodeo.com/06-classement2.php?lang=fra&annee=2008b
我需要添加删除旧值和剩余空间的比例…
以下应该可以解决问题。 该示例适用于此页面。 我通过创建一个书签来测试它。 在IE中，它似乎是居中的，这可能是页面样式的一部分。 无论如何，关键是开头的选择器。 该选择器选择的元素是否将用作表的数据。
var values = []; $('.item-multiplier').each(function() { var t = $(this).text().match(/\d+/); if (t) values.push(parseInt(t)); }); var maxValue = values[0]; for(var i = 0; i < values.length; i++) maxValue = Math.max(maxValue, values[i]); for(var i = 0; i < values.length; i++){ var newBar = $("") .html(values[i]) .css({ "display": "block", "width": "0px", "backgroundColor": "#600", "marginBottom": "5px", "padding": "2px", "color": "#FFF" }); $("body").append(newBar); var w = Math.floor((100 * values[i] / maxValue)) + "%"; newBar.animate({"width":w}, "slow"); }