Question

成为这个社区的一员非常荣幸。我是Web编程的新手，所以如果您要问任何愚蠢的问题，我深表歉意。我的问题是，我决定使用网站上其他页面上已有的项目创建页面。在原始页面上，组织了多个折线图和饼图，在这个新页面上，我想在下面在线组织四个饼图和两个图。但是，每次我重新排列图形时，都会以某种方式使图形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">元素

Bootstap页面组织错误

1 个答案: