尝试在同一个页面上加载多个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

您需要使用类切换ids，或者使您的id唯一。

也许首先使用id="myChart"，第二个使用id="myChart2"，但是您需要创建另一个函数来瞄准第二个图表。

您可以使用类切换if，并通过Javascript将它们作为目标，也就是说，如果两个图表共享相同的选项。

var ctx = document.getElementsByClassName("myChart").getContext('2d');

Answer 2

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

在您的示例中，将它们更改为不同的ids -可能是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>

​