jquery - jquery中的表格到水平条形图

Question

我有一张桌子：

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

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

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

--

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

--

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

Answer 1

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

Answer 2

不，这不是我要问的......它应该从 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");
    })
};

这是最终结果 http://acecrodeo.com/06-classement2.php?lang=fra&annee=2008b

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

Answer 3

以下应该可以解决问题。该示例适用于该页面。我通过为它创建一个小书签来测试它。在 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");
}