我正在尝试并测试一个简单的chart.js图表,但是无论如何我似乎都无法显示该图表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>My Chart.js Chart</title>
</head>
<body>
<div class="container">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<script>
var myChart = document.getElementByID('myChart').getContext('2d');
var spiderChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Happiness', 'Organization', 'Communication', 'Leader'],
datasets:[{
label: 'Statistics',
data: [10, 20, 55, 30]
}]
}
});
</script>
</body>
</html>
简单的Typeo问题:)。您应该使用getElementById
而不是getElementByID
on document
。
工作示例:
var myChart = document.getElementById('myChart').getContext('2d'); // The problem was here
var spiderChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Happiness', 'Organization', 'Communication', 'Leader'],
datasets:[{
label: 'Statistics',
data: [10, 20, 55, 30]
}]
}
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>My Chart.js Chart</title>
</head>
<body>
<div class="container">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句