尝试在同一页面上加载多个chart.js图表

Question

由于某种原因，我无法弄清楚如何在同一页面上加载多个 Chart.js 图表。我可以很好地加载一个，但是当我添加更多时，它们都不会加载。关于我做错了什么有什么想法吗？

<div class="game-cards col-lg-5">
        <div class="chart-container">
            <canvas id="myChart" width="500" height="500"></canvas>
        </div>

        <div class="right-info">
            <h4>Iowa State vs Iowa</h4>
            <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
            <div class="total-points-live">
                <h5>Total Points Bet</h5>
                <h5 id="point-total">20,000</h5>
                <p class="bet-button">Click To Place Bet</p>
            </div>
        </div>
        <div>
            <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
        </div>
    </div>
    <div class="game-cards col-lg-5">
        <div class="chart-container">
            <canvas id="myChart" width="500" height="500"></canvas>
        </div>

        <div class="right-info">
            <h4>Iowa State vs Iowa</h4>
            <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
            <div class="total-points-live">
                <h5>Total Points Bet</h5>
                <h5 id="point-total">20,000</h5>
                <p class="bet-button">Click To Place Bet</p>
            </div>
        </div>
        <div>
            <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
        </div>
    </div>

这是 JavaScript

window.onload = function () {
        var ctx = document.getElementById("myChart").getContext('2d');

        var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Iowa", "Iowa State"],
            datasets: [{
              backgroundColor: [
                "#CC0000",
                "#F1BE48",
              ],
              data: [2000, 9000]
            }]
          },
          options: {
                responsive: true
            ,   maintainAspectRatio: false
          }
        });
    }

Answer 1

不要对多个元素使用相同的 id。id 必须是唯一的！

在您的示例中，将它们更改为不同的 id - 也许是firstChart 和secondChart：

window.onload = function() {
  var ctx = document.getElementById("firstChart").getContext('2d');

  var firstChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Iowa", "Iowa State"],
      datasets: [{
        backgroundColor: [
          "#CC0000",
          "#F1BE48",
        ],
        data: [2000, 9000]
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  });

  var ctx2 = document.getElementById("secondChart").getContext('2d');

  var secondChart = new Chart(ctx2, {
    type: 'doughnut',
    data: {
      labels: ["Iowa", "Iowa State"],
      datasets: [{
        backgroundColor: [
          "#CC0000",
          "#F1BE48",
        ],
        data: [2000, 9000]
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<div class="game-cards col-lg-5">
  <div class="chart-container">
    <canvas id="firstChart" width="500" height="500"></canvas>
  </div>

  <div class="right-info">
    <h4>Iowa State vs Iowa</h4>
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
    <div class="total-points-live">
      <h5>Total Points Bet</h5>
      <h5 id="point-total">20,000</h5>
      <p class="bet-button">Click To Place Bet</p>
    </div>
  </div>
  <div>
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
  </div>
</div>
<div class="game-cards col-lg-5">
  <div class="chart-container">
    <canvas id="secondChart" width="500" height="500"></canvas>
  </div>

  <div class="right-info">
    <h4>Iowa State vs Iowa</h4>
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
    <div class="total-points-live">
      <h5>Total Points Bet</h5>
      <h5 id="point-total">20,000</h5>
      <p class="bet-button">Click To Place Bet</p>
    </div>
  </div>
  <div>
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
  </div>
</div>

或者 - 如果您不需要对每个图表的引用，因为您不想稍后更改它们 - 对所有图表使用相同的类：

window.onload = function() {
  var charts = document.getElementsByClassName("piechart");

  for (chart of charts) {
    var ctx = chart.getContext('2d');

    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ["Iowa", "Iowa State"],
        datasets: [{
          backgroundColor: [
            "#CC0000",
            "#F1BE48",
          ],
          data: [2000, 9000]
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<div class="game-cards col-lg-5">
  <div class="chart-container">
    <canvas id="firstChart" class="piechart" width="500" height="500"></canvas>
  </div>

  <div class="right-info">
    <h4>Iowa State vs Iowa</h4>
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
    <div class="total-points-live">
      <h5>Total Points Bet</h5>
      <h5 id="point-total">20,000</h5>
      <p class="bet-button">Click To Place Bet</p>
    </div>
  </div>
  <div>
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
  </div>
</div>
<div class="game-cards col-lg-5">
  <div class="chart-container">
    <canvas id="secondChart" class="piechart" width="500" height="500"></canvas>
  </div>

  <div class="right-info">
    <h4>Iowa State vs Iowa</h4>
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
    <div class="total-points-live">
      <h5>Total Points Bet</h5>
      <h5 id="point-total">20,000</h5>
      <p class="bet-button">Click To Place Bet</p>
    </div>
  </div>
  <div>
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
  </div>
</div>