[英]Chart.js - Uncaught ReferenceError: chart is not defined
I'm using chart.js and here is my code.我正在使用 chart.js ,这是我的代码。
<script scr="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
var mychart = document.getElementById("myPieChart").getContext('2d');
let round_graph = new chart(mychart, {
type:'doughnut',
data:{
labels:['Billed Samples (Today)','Collected Samples (Today)','Completed Test (Today)','Pending For Validation'],
datasets:[{
lable:'Samples',
data :[
document.getElementById('billed_sample_today').innerHTML,
document.getElementById('bleeded_sample_today').innerHTML,
document.getElementById('completed_sample_today').innerHTML,
document.getElementById('pending_sample_today').innerHTML
],
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor: "rgba(234, 236, 244, 1)",
}]
}
})
I'm getting the Uncaught ReferenceError: chart is not defined error on console.我在控制台上收到 Uncaught ReferenceError: chart is not defined 错误。 How can i correct this?
我该如何纠正这个?
There are two things that are wrong:有两件事是错误的:
classes should have a capital letter.类应该有一个大写字母。
new chart(mychart, {
-> new Chart
new chart(mychart, {
-> new Chart
The library from the CDN doesn't seem to return Chart. CDN 中的库似乎没有返回 Chart。 Try the one they recommend in their documentation: https://www.chartjs.org/docs/latest/getting-started/
试试他们在文档中推荐的那个: https://www.chartjs.org/docs/latest/getting-started/
Here is a working example:这是一个工作示例:
<div id="billed_sample_today">1</div> <div id="bleeded_sample_today">2</div> <div id="completed_sample_today">3</div> <div id="pending_sample_today">4</div> <canvas id="myPieChart"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script> <script> var mychart = document.getElementById("myPieChart").getContext('2d'); let round_graph = new Chart(mychart, { type: 'doughnut', data: { labels: ['Billed Samples (Today)', 'Collected Samples (Today)', 'Completed Test (Today)', 'Pending For Validation'], datasets: [{ lable: 'Samples', data: [ document.getElementById('billed_sample_today').innerHTML, document.getElementById('bleeded_sample_today').innerHTML, document.getElementById('completed_sample_today').innerHTML, document.getElementById('pending_sample_today').innerHTML ], backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'], hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'], hoverBorderColor: "rgba(234, 236, 244, 1)", }] } }) </script>
There is issue with version 2.9.3 .版本2.9.3存在问题。 Version 2.7.3 is working.
2.7.3版正在运行。
Same time you have to call
new Chart
notnew chart
同时你必须调用
new Chart
而不是new chart
window.onload = () => { var mychart = document.getElementById("myPieChart").getContext('2d'); let round_graph = new Chart(mychart, { type:'doughnut', data:{ labels:['Billed Samples (Today)','Collected Samples (Today)','Completed Test (Today)','Pending For Validation'], datasets:[{ lable:'Samples', data:[ document.getElementById('billed_sample_today').innerHTML, document.getElementById('bleeded_sample_today').innerHTML, document.getElementById('completed_sample_today').innerHTML, document.getElementById('pending_sample_today').innerHTML ], backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'], hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'], hoverBorderColor: "rgba(234, 236, 244, 1)", }] } }) }
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> <canvas id="myPieChart" ></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.