javascript - 使用JS计算并使用HTML元素创建图表栏

Question

我的代码(图表栏)有问题。前两个图表的百分比值始终为“100”，条形宽度为“500px”。最新的两张图表是正确的，但总和不正确。

这里是一个 View :/image/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(){