Chart.js -未捕获的引用错误:图表未定义

rhfm7lfc  于 2023-10-18  发布在  Chart.js
关注(0)|答案(2)|浏览(177)

我使用的是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)",
  }]
}

})

我得到了未捕获的引用错误:控制台上的图表未定义错误。我怎么能纠正这个?

ckocjqey

ckocjqey1#

有两件事是错误的:
1.类应该有一个大写字母。new chart(mychart, { -> new Chart
1.来自CDN的库似乎没有返回Chart。试试他们在文档中推荐的方法:https://www.chartjs.org/docs/latest/getting-started/
下面是一个工作示例:

<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/[email protected]"></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>
b0zn9rqh

b0zn9rqh2#

2.9.3版本有问题。2.7.3版本正在运行。
同时,您必须调用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>

相关问题