计算多个额定条的值

Question

我有五个评级栏，每个评级栏一个星。数据（评级）是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>

额定条的宽度设置不正确，我不知道是否正确计算了平均等级。

五星形酒吧旁边的其他评级栏应该有更大的宽度。

有人可以帮我正确计算吗？

Google和亚马逊的两个例子

我想比较两者之间的评分

非常糟糕，糟糕，好，非常好

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