php - JQuery 用户界面 : How to use the progressbar to make a horizontal bar graph?

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) 转换为值。

背后的数学原理:

假设 $furniture 是 104，$electronics 是 76。正如您所指出的，104 将不起作用，因为 jQuery UI 进度条只支持以下值100.

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

0.961538462 * 104 = 100

0.961538462 * 76 =(四舍五入)73