JQuery UI：如何使用进度条制作水平条形图？

我正在尝试将进度条用于非传统目的。我想使用该功能来显示从数据库中检索到的两个值的水平条形图。JQuery UI：如何使用进度条制作水平条形图？

我的PHP/MySQL/JQuery的：

// retrieve results for display 
$query = mysql_query(" SELECT furniture_purchases, electronics_purchases FROM sales WHERE store_id = $storeId "); 
$sales = mysql_fetch_array($query); 
$furniture = $ratings[0]; 
$electronics = $ratings[1]; 

echo ("<script type='text/javascript'> 
      // display sales results 
      $(document).ready(function() { 
       $('div.furnitureBar').progressbar({ value: $furniture }); 
       $('div.electronicsBar').progressbar({ value: $electronics }); 
      }); 
     </script>");

我的HTML：

<div class='furnitureBar'></div> 
<div class='electronicsBar'></div>

现在的问题是，说如果101个家具物品被出售，对家具的进度条会充满整个空间，因为100是根据JQuery进度条文档的最大值：http://jqueryui.com/demos/progressbar/

相反，我希望这两个值形成动态的相互比较，s o如果出售101件家具产品并出售90件电子产品，那么两款酒吧应该在中间，而不是像100件那样是最大可能的销售数量。事实上，销售的最大数量没有限制。

我希望我有道理。

来源

2010-09-19 Scarlet Johanson

您需要对这些值进行缩放以适合它们。 实施例：

$furniture = $ratings[0]; 
$electronics = $ratings[1]; 

$max = max($furniture, $electronics); 
if ($max > 100){ 
    $furniture *= (100/$max); 
    $electronics *= (100/$max); 
}

本示例确定号码中的一个是否大于100，这将导致（用于进度）的溢出。如果是，它会计算一个比率，使得最高数字现在为100.然后，它相应地调整第二个数字。如果您需要一个整数值，只需对该值进行四舍五入或应用(int)强制转换。

其背后的数学：

比方说$furniture是104 $electronics是76.你所指出的那样，104将无法工作，因为jQuery UI的进度条只支持值高达100

104大于76，所以我们计算比例来调整像这样的值：100/104 = 0.961538462。所以;

0.961538462 * 104 = 100

0.961538462 * 76 =（四舍五入）73

来源

2010-09-19 22:05:12

这实际上是很容易与被填充到您所需的百分比表上完成。在性能方面，它将击败Jquery选项中的裤子。

从一个网站，我做了一个例子：

<td> 
    <div id="graph_grey"> 
    <div id="graph_self" style="width:62%;"></div> 
    </div> 
</td>

来源

2010-10-21 22:50:02 bpeterson76

JQuery UI：如何使用进度条制作水平条形图？

回答

相关问题