表在jquery中的水平条形图 [英] Table to horizontal bar graph in jquery

问题描述

我有一张表：

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

我想拿它并用它做一个条形图。 p>

不是网上没有lib，而是原型或flash xml文件。

- p>

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

-

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

解决方案

这完全是JavaScript，所以如果你有其他格式的数据，你首先必须转换成JS：

 < script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3/ jquery.min.js>< / s的CRIPT> 
< 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]）; 
} 
 
为（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规则，比如好的背景，条间的边距，文本颜色等，但是这只是一个演示。 b $ b

I have a table :

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

I would like to take it and make a bar graph with it.

Not that there is no lib on the net, but is prototype or flash xml file.

--

The solution I am working on is a jquery plugin that will generate a html link for google chart... not pretty but KISS (really simple) and ugly.

--

Here is one of my inspirations : http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

解决方案

This is entirely JavaScript, so if you have your data in other format you'll first have to convert to 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>

Just written and tested in Opera 10.

Of course, it'd be better if you adjusted all possible CSS rules in a separate file, such as a nice background, margins between bars, text color, etc., but this is just a demo.

这篇关于表在jquery中的水平条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！