Question

我正在尝试将进度条用于非传统目的。我想使用该功能显示从数据库中检索的两个值的水平条形图。

我的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件家具，家具的进度条将填满整个空间，因为根据JQuery进度条文档，100是最大值：http://jqueryui.com/demos/progressbar/

相反，我希望这两个值动态形成相互比较，所以如果销售了101个家具产品并销售了90个电子产品，则两个条形应该在中间而不是它看起来像100是最大数量销售可能。事实上，最大销售数量没有限制。

我希望我有道理。

Answer 1

您需要缩放值以使其适合。 示例：

$furniture = $ratings[0]; $electronics = $ratings[1]; $max = max($furniture, $electronics); if ($max > 100){ $furniture *= (100 / $max); $electronics *= (100 / $max); }

此示例确定其中一个数字是否大于100，这将导致溢出（对于进度条）。如果是，则计算一个比率，使得最高数字现在为100.然后，它相应地调整第二个数字。如果您需要一个整数值，只需将(int)强制转换为值或。{/ p>
背后的数学：

假设$furniture为104而$electronics为76.正如您所指出的那样，104将无效，因为jQuery UI进度条仅支持最多100个值。

104大于76，因此我们计算比率以调整值：100/104 = 0.961538462。所以;

0.961538462 * 104 = 100

0.961538462 * 76 =（四舍五入）73

Answer 2

实际上，使用填充到所需百分比的表格非常容易。性能方面，它将击败Jquery选项中的裤子。

我所做网站的一个例子：

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

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

2 个答案: