試圖讓多個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> 

Answer 2

您需要使用類切換ID或使ID唯一

也許使用id="myChart"為先，和id="myChart2"為第二，但你需要創建另一個功能為目標的第二個圖表。

您可以使用類切換ID並通過Javascript定位它們，那就是如果兩個圖表共享相同的選項。

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