Javascript HTML/JS多饼图问题 我在网页上获取多个饼图时遇到问题 我从codepen获得它，当我试图在一个页面中实现多个Pei图表时，它在图表中显示错误 请在截图后检查代码笔链接

截图如下：

单饼图-没有问题

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

HTML代码（请点击上面的链接获取CSS和JS代码）

人类718
狗531
Cats868


子弹344
Aliens1145

您几乎是对的，只需记住为元素使用唯一标识符即可 为元素添加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>

---

花了好几个小时想出解决办法，但没办法。我想使用有图例和图表的饼图，不需要与图表交互。约束：饼图数据集必须来自html文件，并且可以在单个页面中创建多个图表。感谢任何帮助，因为它再次将class=“pieID legend”添加到class=“pieID pie”中，所以您需要重命名它classes@ShanuTThankachan你能在代码中显示同样的内容吗？我试过你说的，但没有用，谢谢你检查Liko回答是的，检查js文件上的var颜色代码非常感谢Liko

<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");