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：如何使用進度條製作水平條形圖？

回答

相關問題