jquery中的表格到水平条形图

我有一张桌子：

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

我想用它制作一个条形图。

并不是说网上没有lib，而是prototype或者flash xml文件。

--

我正在研究的解决方案是一个 jquery 插件，它将为 google 图表生成 html 链接...不漂亮，但 KISS （非常简单）且丑陋。

--

这是我的灵感之一：http://www.dumpsterdoggy.com/articles/?jquery-horizo​​ntal-bar-graph http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

这完全是 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 规则会更好，例如漂亮的背景、条之间的边距、文本颜色等，但这只是一个演示。