Chart.js - 未捕獲的參考錯誤：未定義圖表

Question

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

})

我在控制台上收到 Uncaught ReferenceError: chart is not defined 錯誤。 我該如何糾正這個？

Answer 1

有兩件事是錯誤的：

1. 類應該有一個大寫字母。 new chart(mychart, { -> new Chart

2. 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/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>

Answer 2

版本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>