[英]Trying to get multiple chart.js charts to load on the same page
由于某种原因,我无法弄清楚如何在同一页面上加载多个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
}
});
}
请勿对多个元素使用相同的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>
您需要使用类切换ID或使ID唯一
也许使用id="myChart"
为先,和id="myChart2"
为第二,但你需要创建另一个功能为目标的第二个图表。
您可以使用类切换ID并通过Javascript定位它们,那就是如果两个图表共享相同的选项。
var ctx = document.getElementsByClassName("myChart").getContext('2d');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.