Php jQueryUI：如何使用progressbar制作水平条形图？_Php_Jquery_Mysql_Jquery Ui

Php jQueryUI：如何使用progressbar制作水平条形图？

php jquery mysql jquery-ui

Php jQueryUI：如何使用progressbar制作水平条形图？,php,jquery,mysql,jquery-ui,Php,Jquery,Mysql,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); $furni

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

我的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>");

//检索要显示的结果
$query=mysql\u query（“从销售中选择家具采购、电子产品采购，其中store\u id=$storeId”）；
$sales=mysql\u fetch\u数组（$query）；
$furniture=$ratings[0]；
$electronics=$ratings[1]；
回声（“
//显示销售结果
$（文档）.ready（函数（）{
$（'div.furnitureBar'）.progressbar（{value:$furniture}）；
$（'div.electronicsBar'）.progressbar（{value:$electronics}）；
});
");

我的HTML：

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

现在的问题是，假设售出了101件家具，家具的进度条将填满整个空间，因为根据JQuery progressbar文档，100是最大值：

相反，我希望这两个值动态地相互比较，所以如果101个家具项目被出售，90个电子产品被出售，那么这两个酒吧应该在中间，而不是它看起来像100是销售的最大数量是可能的。事实上，最大销售量没有限制

我希望我说的有道理。

您需要调整值，使其适合示例：

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

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

此示例确定其中一个数字是否大于100，这将导致溢出（对于progressbar）。如果是，它将计算一个比率，使最高数字现在为100。然后，它相应地调整第二个数字。如果需要整数值，只需对数值进行四舍五入或应用

（int）

强制转换即可

背后的数学：

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

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

假设

$furniture

是104，

$electronics

是76。正如您所指出的，104不起作用，因为jQueryUI进度条只支持最多100个值

104大于76，因此我们计算比率来调整如下值：

100/104

0.961538462

。所以,

0.961538462*104

0.961538462*76

=（四舍五入）

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

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

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

（int）