HTML/JS 多个饼图问题答案

【问题标题】：HTML/JS Multiple Pie Chart IssueHTML/JS 多个饼图问题
【发布时间】：2018-09-04 16:40:38
【问题描述】：

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

以下截图：

单饼图 - 没问题

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

LINK to codepen

HTML 代码（请点击上方的 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>

【问题讨论】：

花了几个小时找出解决方案，但无法解决。我想使用有图例和图表的饼图，不需要与图表交互。约束：饼图数据集必须来自 html 文件，并且可以在单个页面中创建多个图表。 感谢任何帮助
因为它又把 class="pieID legend" 添加到 class="pieID pie"，所以你需要重命名这个类
@ShanuTThankachan 您能否在代码中显示相同的内容，我已经尝试过您所说的但没有用，谢谢
查看 Liko 答案
是的，检查js文件上的var颜色代码

标签： javascript html pie-chart

【解决方案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");

【讨论】：

非常感谢 Liko