Проблема многократной круговой диаграммы HTML / JS - PullRequest
Новая
       8

Проблема многократной круговой диаграммы HTML / JS

0 голосов
/ 04 сентября 2018
  • У меня возникла проблема с получением нескольких круговых диаграмм на моей веб-странице.
  • Я получил его из codepen, когда я пытался внедрить более одной диаграммы Пей на страницу, в диаграмме отображались ошибки.
  • Пожалуйста, проверьте ссылку Codepen после скриншотов

Скриншоты ниже:

Круговая диаграмма - Нет проблем

enter image description here

При добавлении еще одного графика возникают проблемы с загрузкой набора данных: на каждом графике отображаются 5 полей вместо 3 и 2 соответственно enter image description here

ССЫЛКА на 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>

1 Ответ

0 голосов
/ 04 сентября 2018

Вы почти правы, просто не забудьте использовать уникальные идентификаторы для ваших элементов Добавьте идентификаторы для ваших элементов: 

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