所以我想尝试建立一个包含图表的网站。我使用了chart.js。现在，我尝试制作两个图表，因此我复制了一个之前制作的图表，并更改了它的变量，但是它没有显示在我的HTML页面上。我想问的是，是否可以使用chart.js制作2张图表，但我做错了方法，还是我只能制作一张图表？谢谢。顺便说一下，这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Chart Page</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
<script>
let myChart2 = document.getElementById('myChart2').getContext('2d');
let massPopChart = new Chart(myChart2, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
</body>
两个图表都使用相同的变量名massPopChart。您只需要将变量名称更改为massPopChart1和massPopChart2。
只需在此处检查正确的工作https://jsfiddle.net/4gdtujve/