jquery中水平条形图的表

我有一张桌子：

1-joe-234
2-bob-432
3-sean-654

我想用它做一个条形图

不是说网上没有lib，而是原型或flashxml文件

--

我正在研究的解决方案是一个jquery插件，它将为google图表生成一个html链接。。。不漂亮，但亲吻（真的很简单）和丑陋

--

以下是我的灵感之一：

---

这完全是JavaScript，因此如果您有其他格式的数据，您必须首先转换为JS：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div id="bars"></div>
<script type="text/javascript">
//<![CDATA[
    $(function (){
      var values = [234, 654, 432];
      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 = $("<span>").html(values[i]);
        newBar.css({
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"
        });

        $("#bars").append(newBar);

        newBar.animate({"width": (100 * values[i] / maxValue) + "%"}, "slow");
      }
    });
//]]>
</script>

//

刚刚在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 = $("<span>").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");
    })
};

jQuery.fn.horizontalTableGraph=函数（）{
$（this.find（“thead”）.remove（）；
var maxvalue=0；
$（this）.find（“tr”）.each（函数（i）{
$（this.removeClass（）；
$（this.find（“td”）.eq（0）.animate（{width:'50px'}，1000）；
$（this.find（“td”）.eq（1）.animate（{width:'150px'}，1000）.css（“文本对齐”，“左”）；
$（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（函数（i）{
var thevalue=$（this.find（“td”）.eq（2.html（）；
var newBar=$（“”）.html（值）；
newBar.css({
“显示”：“块”，
“宽度”：“0px”，
“背景色”：“600”，
“marginBottom”：“5px”，
“填充”：“2px”，
“颜色”：“FFF”
});
//$（this.find（“td”）.eq（2.hide（）；
$（this.find（“td”）.eq（2）.append（newBar）；
动画（{“宽度”：（100*thevalue/maxvalue）+“%”}，“慢”）；
})
};

这是最后的结果

---

我需要添加“删除旧值”和剩余空间的比例…

下面的操作应该可以完成。该示例适用于此页面。我通过创建一个bookmarklet来测试它。在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 = $("<span>")
         .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");
}

var值=[]；
$（'.item multiplier'）。每个（函数（）{
var t=$（this.text（）.match（/\d+/）；
if（t）value.push（parseInt（t））；
});
var maxValue=值[0]；
对于（变量i=0；i

该表是以HTML格式还是以编程语言格式作为数组/矩阵？