複数の評価バーの値を計算する

Question

1つの星にそれぞれ5つの評価バーがあります。データ（評価）は、0と1の間の数値の配列です。

評価バーのパーセンテージ値を計算します。範囲は0％から100％になります。

評価バーの幅が正しく設定されておらず、平均評価が正しく計算されている場合、私は知りません。私の計算が

$(document).ready(function() { 
 
    initializeStatistics(); 
 
}); 
 

 
var ratings = [0.2, 0.8, 0.1, 0.9, 0.1, 0.3, 0.9, 0.1, 0.6, 1, 0.1, 0.4, 0.6, 0.8, 0.9, 0.6, 0.1]; 
 

 
function initializeStatistics() { 
 
    var ratingBars = $(".ratingBar"); // get all the bars 
 

 
    var sumRating = getSumRating(); // get the sum of all ratings 
 

 
    for (var i = 0; i < ratingBars.length; i++) { 
 
    setBarWidth(ratingBars[i], calculateBarWidth(i, sumRating, ratingBars.length)); // calculate the % width and set it 
 
    } 
 

 
    createFinalRatingBar(sumRating, ratingBars.length); // calculate the average rating from all ratings 
 
} 
 

 
function getSumRating() { // get the sum of all ratings 
 
    var sumRating = 0; 
 

 
    for (var i = 0; i < ratings.length; i++) { 
 
    sumRating += ratings[i]; 
 
    } 
 

 
    return sumRating; 
 
} 
 

 
function calculateBarWidth(barIndex, sumRating, ratingBarsLength) { // calculate the % width and set it 
 
    var width = 0; 
 

 
    for (var i = 0; i < ratings.length; i++) { 
 
    var currentRating = ratings[i]; 
 

 
    var isInMinRange = currentRating > (barIndex/ratingBarsLength); // the value is bigger than the value range from before 
 
    var isInMaxRange = currentRating < (barIndex + 1/ratingBarsLength); // the value is smaller than the value range coming up next 
 

 
    if (isInMinRange && isInMaxRange) { 
 
     width += currentRating; // add the value to the width 
 
    } 
 
    } 
 

 
    if (width > 0) 
 
    width = sumRating/width; // get the width in percent 
 

 
    return width; 
 
} 
 

 
function setBarWidth(bar, width) { // set the final width of the bar 
 
    $(bar).width(width + "%"); 
 
} 
 

 
function createFinalRatingBar(sumRating, ratingBarsLength) { 
 
    var averageRating = sumRating/ratingBarsLength; // get the average rating from all ratings 
 

 
    for (var j = 0; j < ratingBarsLength; j++) { 
 
    var isFull = false; 
 

 
    if (j < averageRating) { // place a full image, if the value is smaller than the rating otherwise place an empty image 
 
     isFull = true; 
 
    } 
 

 
    // Create 1 RatingContainer (full or empty) 
 
    } 
 

 
    console.log("average rating: " + averageRating); 
 
}

.ratingBar { 
 
    height: 30px; 
 
} 
 

 
#ratingBarOne { 
 
    background-color: #ff6f31; 
 
} 
 

 
#ratingBarTwo { 
 
    background-color: #ff9f02; 
 
} 
 

 
#ratingBarThree { 
 
    background-color: #ffcf02; 
 
} 
 

 
#ratingBarFour { 
 
    background-color: #88b131; 
 
} 
 

 
#ratingBarFive { 
 
    background-color: #99cc00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="ratingBarFive" class="ratingBar"></div> 
 
<div id="ratingBarFour" class="ratingBar"></div> 
 
<div id="ratingBarThree" class="ratingBar"></div> 
 
<div id="ratingBarTwo" class="ratingBar"></div> 
 
<div id="ratingBarOne" class="ratingBar"></div>

間違っているようです

5つ星のバーの横にある他の評価バーは、より大きな幅を持つ必要があります。

誰かが正しい計算を手伝ってくれますか？

非常に良い、良い、まあまあ、非常に、悪い悪いグーグルとアマゾン

から

二つの例

私は

間の評価を比較したいです

Answer 1

バー幅の計算が少し複雑になった可能性があります。私の解決策は、幅を計算する前にスコアを「スター」に変換することです。私は、彼らが似ているどのように多くの星にそれらを並べ替えるごとの評価のための

（あなたは私のswitch文でスターのための範囲を見ることができます）

その後、各スター・グループのために、私がしているどのように多くのことで、合計評価を分けます各スターグループは幅を取得します。次に、その計算に100を掛けて、バーの幅に適切なパーセンテージを取得します。

var ratings = [0.2, 0.8, 0.1, 0.9, 0.1, 0.3, 0.9, 0.1, 0.6, 1, 0.1, 0.4, 0.6, 0.8, 0.9, 0.6, 0.1]; 
 

 
$(document).ready(function() { 
 
    initializeStatistics(); 
 
}); 
 

 
function initializeStatistics() { 
 
    if(ratings.length === 0){ 
 
    console.log("There are no ratings"); 
 
    return; 
 
    } 
 
    // convert ratings to stars 
 
    var stars = { 
 
    1: [], 
 
    2: [], 
 
    3: [], 
 
    4: [], 
 
    5: [] 
 
    }; 
 
    // add the ratings to its respective star array 
 
    ratings.forEach(function(rate) { 
 
    var star = getStarFromScore(rate); 
 
    stars[star].push(rate) 
 
    }) 
 

 
    // we know there will always be 5 stars/bars 
 
    for (var i = 1; i <= 5; i++) { 
 
    var bar = $("#ratingBar" + i); 
 
    var desc = $("#desc" + i); 
 
    var width = stars[i].length/ratings.length; 
 
    bar.width((width * 100) + "%"); 
 
    desc.html(stars[i].length) 
 
    } 
 
} 
 

 
function getStarFromScore(score) { 
 
    switch (true) { 
 
    case (score < .2): 
 
     return 1; 
 
    case (score < .4): 
 
     return 2; 
 
    case (score < .6): 
 
     return 3; 
 
    case (score < .8): 
 
     return 4; 
 
    default: 
 
     return 5; 
 
    } 
 
}

.ratingBar { 
 
    height: 30px; 
 
} 
 
#ratingBar1 { 
 
    background-color: #ff6f31; 
 
} 
 
#ratingBar2 { 
 
    background-color: #ff9f02; 
 
} 
 
#ratingBar3 { 
 
    background-color: #ffcf02; 
 
} 
 
#ratingBar4 { 
 
    background-color: #88b131; 
 
} 
 
#ratingBar5 { 
 
    background-color: #99cc00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="ratingBar5" class="ratingBar"></div><span id="desc5"></span> Five Star Ratings 
 
<div id="ratingBar4" class="ratingBar"></div><span id="desc4"></span> Four Star Ratings 
 
<div id="ratingBar3" class="ratingBar"></div><span id="desc3"></span> Three Star Ratings 
 
<div id="ratingBar2" class="ratingBar"></div><span id="desc2"></span> Two Star Ratings 
 
<div id="ratingBar1" class="ratingBar"></div><span id="desc1"></span> One Star Ratings