JQuery UI: Как использовать панель прогресса для создания горизонтальной гистограммы?

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 предметов мебели, прогресс бар для мебели заполнит весь пространство, так как 100 является максимальным значением в соответствии с документацией по прогрессивной версии JQuery: http://jqueryui.com/demos/progressbar/

Вместо этого я хочу, чтобы два значения динамически формировались как сравнение друг с другом, s o если было продано 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, что привело бы к переполнению (для ProgressBar). Если это так, он вычисляет отношение, так что наибольшее число теперь равно 100. Затем оно соответствующим образом корректирует второе число. Если вам требуется целочисленное значение, просто округлите или примените значение (int) к значениям.

Математика за ним:

Скажем $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>