막 대형 차트가 Chart.js와 함께 표시되지 않습니다.

Question

초보자 인 Chart.js를 사용하고 있는데 막 대형 차트를 표시하는 데 문제가 있습니다. 내가이 코드를 실행하려고 할 때 빈 화면이 생기는 이유는 무엇입니까?

<div id="chart"> 
<canvas id="myGraph" width="400" height="400"></canvas> 
</div> 

<script> 
var myData = { 
     labels: ["2000", "2001", "2002", "2003"], 
     datasets: [{ 
     label: 'Test chart', 
     data: [20, 50, 10, 12], 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)', 
      'rgba(255, 206, 86, 0.2)', 
      'rgba(75, 192, 192, 0.2)', 
      'rgba(153, 102, 255, 0.2)', 
      'rgba(255, 159, 64, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)', 
      'rgba(75, 192, 192, 1)', 
      'rgba(153, 102, 255, 1)', 
      'rgba(255, 159, 64, 1)' 
     ], 
     borderWidth: 1 
    }] 
    }, 
}); 

var ctx = document.getElementById("myGraph").getContext("2d"); 
var debt = new Chart(ctx).Bar(myData); 

</script> 

Answer 1

JSON 리터럴에 여러 가지 오타가 있습니다. 그래서

var config = { 
     type: 'bar', 
     data: { 
     labels: ["2000", "2001", "2002", "2003"], 
     datasets: [{ 
     label: 'Test chart', 
     data: [20, 50, 10, 12], 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)', 
      'rgba(255, 206, 86, 0.2)', 
      'rgba(75, 192, 192, 0.2)', 
      'rgba(153, 102, 255, 0.2)', 
      'rgba(255, 159, 64, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)', 
      'rgba(75, 192, 192, 1)', 
      'rgba(153, 102, 255, 1)', 
      'rgba(255, 159, 64, 1)' 
     ], 
     borderWidth: 1 
    }] 
    } 
}; 
var ctx = document.getElementById("myGraph"); 
var debt = new Chart(ctx, config);