HTML/JS 多饼图问题

Question

我在网页上获取多个饼图时遇到问题。
我从 codepen 得到的，当我试图在一个页面中实现多个 Pei 图表时，它在图表中显示错误。
截图后请检查 Codepen Link

以下截图：

单个饼图 - 没问题

添加另一个图表时，存在这些数据集加载问题，它在每个图表中显示 5 个字段，而不是分别显示 3 个和 2 个

LINK to codepen

HTML代码（请点击上方Link获得CSS&JS代码）

<main>
  <section>
    <div class="pieID pie"></div>
    <ul class="pieID legend">
      <li><em>Humans</em><span>718</span></li>
      <li><em>Dogs</em><span>531</span></li>
      <li><em>Cats</em><span>868</span></li>
    </ul>
  </section>
<!--  Un-commenting Below brings erro in first pie chart, how can i get to charts on same page? Thanks -->
  <section>
    <div class="pieID pie"></div>
    <ul class="pieID legend">
      <li><em>Slugs</em><span>344</span></li>
      <li><em>Aliens</em><span>1145</span></li>
    </ul>
  </section>
</main>

Answer 1

您几乎是对的，请记住为您的元素使用唯一标识符为您的元素添加 ID：

<main>
  <section>
    <div class="pieID pie" id="pie1"></div>
    <ul class="pieID legend" id="legend1">
      <li><em>Humans</em><span>718</span></li>
      <li><em>Dogs</em><span>531</span></li>
      <li><em>Cats</em><span>868</span></li>
    </ul>
  </section>
<section>
    <div class="pieID pie" id="pie2"></div>
    <ul class="pieID legend" id="legend2">
      <li><em>Slugs</em><span>344</span></li>
      <li><em>Aliens</em><span>1145</span></li>
    </ul>
  </section>
</main>

像这样调用创建函数

createPie("#legend1", "#pie1");
createPie("#legend2", "#pie2");

HTML/JS 多饼图问题

HTML/JS Multiple Pie Chart Issue

html

javascript

pie-chart