用JS计算，用HTML元素创建一个图表条

Question

我有一个问题与我的代码(图表栏)。前两个图表的百分比值始终为"100"，条形条宽度为"500px"。最近的两张图表是正确的，但总数不对。

这里有一个视图:https://i.stack.imgur.com/QY2i8.jpg

HTML:

<div class="chart">
<ul>
  <li>
    <span class="caption">Germany</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">100</span>
    <span class="percent"></span>
  </li>
  <li>
    <span class="caption">United States</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">400</span>
    <span class="percent"></span>
  </li>
  <li>
    <span class="caption">Spain</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">50</span>
    <span class="percent"></span>
  </li>
  <li>
    <span class="caption">Italy</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">200</span>
    <span class="percent"></span>
  </li>
</ul>
  <div class="total"></div>
</div>

Javascript(需要jQuery):

$( document ).ready(function() {
    // Colors of the bars   
    var barColors = [
    "0e80ea", 
    "9acb06", 
    "ff6804", 
    "d10707", 
    "44b512", 
    "11d8df",
    "...", // More colors
  ];
    // Array to hold the value
    var chartValues = [];
    // Array to hold the sum of charts
    var chartSum = [];
    // Let's go
    $(".chart li").each(function(){          
        // Count the charts
        var chartTotal = 0;
        for(var i=0; i<chartSum.length; i++) {
          chartTotal += chartSum[i];
        }
        chartSum.push(Number($(this).html()));
        // calculate the total sum (all values)
        var totalSum = 0;
        totalSum += parseInt($(this).find(".value").html());
        // If should be: push the total sum to array for 'absolute' view
        // chartValues.push(totalSum);
        // Push the value to array
        var chartValue = [];
        chartValue.push($(this).find(".value").html());
        chartValues.push(chartValue);
        // Get the highest value from array
        var highestValue = Math.max.apply(Math, chartValues);
        // calculate the percent value  
        var percentValue =  $(this).find(".value").html() / highestValue * 100;
        // calculate and show the bar ('*500' because the bar is always 500px and the bar-inner max. 500px width) 
        var chartValueInSum =  $(this).find(".value").html();
        $(this).find(".bar-inner").css({"background-color" : '#' + barColors[i], 'width' : chartValueInSum / highestValue * 500 + 'px'});
        // Round the percent value
        var percentValueRounded = parseFloat(percentValue).toFixed(2);
        var percentValueRounded = percentValueRounded.replace(".00", ""); 
        // Show the percent value
        $(this).find(".percent").html(percentValueRounded + '%');
        // Show the total sum
        $(".total").html(totalSum);
    });
});

风格:

body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;margin-top:50px;}
ul,li{list-style:none;padding:0;margin:0;}
.chart li{font-size:12px;margin:5px 0;}
.chart .bar{vertical-align:middle;display:inline-block;background:#eee;height:20px;width:500px;}
.chart .bar-inner{display:block;width:0;height:20px;background:#46484f;}
.chart .caption{vertical-align:middle;display:inline-block;width:160px;text-align:right;margin-right:10px;}
.chart .value{vertical-align:middle;display:inline-block;text-align:right;margin:0 15px;width:50px;color:#000;font-weight:bold;}
.chart .percent{vertical-align:middle;display:inline-block;color:#666;}
.chart .total{font-size:18px;margin:10px 170px 10px;}

Answer 1

解决方案在这里

http://jsfiddle.net/nmdkswL9/

移动

var totalSum = 0;

移出该行，因为直到最后一个循环之前，它总是被设置为0。这是正确的位置，因为它需要在循环之前设置为零。

var totalSum = 0;
// Let's go
$(".chart li").each(function(){