试图让多个chart.js图表加载在同一页面
问题描述:
由于某种原因,我无法弄清楚如何让多个chart.js图表加载到同一页面上。我可以得到一个加载得很好,但是当我添加更多时,他们都没有加载。任何想法,我做错了什么?试图让多个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与类或使独特的IDS
也许使用id="myChart"
为先,和id="myChart2"
为第二,但你需要创建另一个函数来定位第二个图表。
你可以用类切换ID并通过Javascript将它们定位,如果两个图表共享相同的选项。
var ctx = document.getElementsByClassName("myChart").getContext('2d');
答
不要对多个元素使用相同的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>
是的,谢谢!出于某种原因,我的大脑昨晚不工作,谢谢你的简单答案。 – Branduo
不用担心,乐意帮忙:) – Deano