单页上有多个饼图

Question

我一整天都在困惑。

我有以下显示饼图的元素，其中有4个：

<div class="pie-chart-sec">
                        <div class="widget-title">
                            <h3>Browser Viewed</h3>
                            <span>Most Browser viewed</span>
                        </div>
                        <div class="most-browsers">
                            <div class="pieID pie">
                            </div>
                            <ul class="pieID legend">
                              <li>
                                <em>Chrome</em>
                                <span>718</span>
                              </li>
                              <li>
                                <em>Firefox</em>
                                <span>531</span>
                              </li>
                              <li>
                                <em>Opera</em>
                                <span>868</span>
                              </li>
                              <li>
                                <em>Safari</em>
                                <span>344</span>
                              </li>
                              <li>
                                <em>Explorer</em>
                                <span>1145</span>
                              </li>
                            </ul>
                        </div>
                    </div>

显然每个人都有不同的数据。但是，运行饼图的代码以奇怪的方式在每个元素中显示相同的数据。我认为以各种方式放置.each（）可以解决问题 - 但事实并非如此。

如何让代码在每个单独的图表上运行。

代码如下：

// BROWSER PIE START

    function sliceSize(dataNum, dataTotal) {
      return (dataNum / dataTotal) * 360;
    }

    function addSlice(sliceSize, pieElement, offset, sliceID, color) {
      $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
      var offset = offset - 1;
      var sizeRotation = -158 + sliceSize;
      $("."+sliceID).css({
        "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
      });
      $("."+sliceID+" span").css({
        "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
        "background-color": color
      });
    }

    function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
      var sliceID = "s"+dataCount+"-"+sliceCount;
      var maxSize = 158;
      if(sliceSize<=maxSize) {
        addSlice(sliceSize, pieElement, offset, sliceID, color);
      } else {
        addSlice(maxSize, pieElement, offset, sliceID, color);
        iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
      }
    }

    function createPie(dataElement, pieElement) {
      var listData = [];
      $(dataElement+" span").each(function() {
        listData.push(Number($(this).html()));
      });
      var listTotal = 0;
      for(var i=0; i<listData.length; i++) {
        listTotal += listData[i];
      }
      var offset = 0;
      var color = [
        "#ff6b6b", 
        "#63d6ff", 
        "#6e6eff", 
        "#f76fff", 
        "#ffb48f",
      ];
      for(var i=0; i<listData.length; i++) {
        var size = sliceSize(listData[i], listTotal);
        iterateSlices(size, pieElement, offset, i, 0, color[i]);
        $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
        offset += size;
      }
    }

    createPie(".pieID.legend", ".pieID.pie");

// BROWSER PIE END

我相信对于拥有更好技能的人来说，这是显而易见的！

非常感谢。