Bootstrap页面组织错误

Question

很高兴成为这个社区的一员。我是网络编程的新手，所以如果你问任何愚蠢的问题我会道歉。我的问题是，我决定使用我网站上另一页上已有的项目创建一个页面。在原始页面上，有几个线条图形和饼图组织起来，在这个新页面上，我想组织四个饼图和两个在线图表。但是，每次重新排列图形时，图形js插件都会以某种方式无效，导致图形消失。我究竟做错了什么？

原始页：http://tratspay.com/app/index.html新页面：http://tratspay.com/app/detalhamentoteste.html

<!-- /.row --> 
  <!-- Main row -->
  <div class="row">
    <div class="col-lg-5 col-xlg-3">
      <div class="info-box">
        <div class="d-flex flex-wrap">
          <div>
            <h4 class="text-black">SRC que mais rentável</h4>
          </div>
        </div>
        <div class="m-t-2">
            <canvas id="pie-chart" height="210"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-5 col-xlg-3">
      <div class="info-box">
        <div class="d-flex flex-wrap">
          <div>
            <h4 class="text-black">Estado mais rentáveis</h4>
          </div>
        </div>
        <div class="m-t-2">
            <canvas id="pie-chart" height="210"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-5 col-xlg-3">
      <div class="info-box">
        <div class="d-flex flex-wrap">
          <div>
            <h4 class="text-black">Estados com maior conversão de boletos</h4>
          </div>
        </div>
        <div class="m-t-2">
            <canvas id="pie-chart" height="210"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-5 col-xlg-3">
      <div class="info-box">
        <div class="d-flex flex-wrap">
          <div>
            <h4 class="text-black">Maiores motivos de reembolso</h4>
          </div>
        </div>
        <div class="m-t-2">
            <canvas id="pie-chart" height="210"></canvas>
        </div>
      </div>
    </div>
            <div class="col-lg-7 col-xlg-9">
      <div class="info-box">
        <div class="d-flex flex-wrap">
          <div>
            <h4 class="text-black">Relatório de Vendas</h4>
          </div>
          <div class="ml-auto">
            <ul class="list-inline">
              <li class="text-info"> <i class="fa fa-circle"></i> Este mês</li> <li class="text-blue"> <i class="fa fa-circle"></i> Mês Anterior</li>
            </ul>
          </div>
        </div>
        <div>
          <canvas id="line-chart"></canvas>
        </div>
      </div>
    </div>

  <div class="row">
    <div class="col-lg-4">
      <div> 

Answer 1

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

你不能有多个<canvas id="pie-chart">元素