[Java Script Error] Chart Js Cannot read property 'length' of undefined

우선 chart.js 를 실행할 때, function( ) 을 사용하지 않아 위 에러가 발생했었지만,

다른 함수를 만들어 사용할 때도, 비슷한 에러를 몇번 발견한 적이 있었기 때문에..

앞으로 함수를 만들어서 사용할 때는 꼭 function( ) 으로 감싸주고 사용해야 겠다.

 

원인 

- The problem is that when your code executes, the canvas has not been created yet

- 코드 실행시 <canvas> 가 아직 만들어지지 않았기 때문에 해당 문제가 발생

 

해결

- You should wrap your code inside a function and assign that function to window.onload event. 

- 코드를 function( ) 으로 감싸준 다음에, event 를 실행시켜 준다.

- 여기서는 window.onload event 라고 했지만 function( ) 으로 감사준 다음에 $(document).read(funtion( ){ });

안에 넣고 실행해 주어도 코드는 작동을 한다.

window.onload = function() {
  var ctx = document.getElementById("myChart");
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "2015",
        data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
      }]
    }
  })
}

 

참고 링크

stackoverflow.com/questions/36650455/chart-js-cannot-read-property-length-of-undefined

Chart Js Cannot read property 'length' of undefined

risha-lee.tistory.com/31

Chart.js Pie 데이터 값 출력