Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js

问题:

I have this simple html:

<canvas id="myChart" width="400" height="400"></canvas> 

and this js:

var ctx = document.getElementById("myChart");      var myChart = new Chart(ctx, {         type: 'bar',         data: {             labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],             datasets: [{                 label: '# of Votes',                 data: [12, 19, 3, 5, 2, 3],                 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             }]         },         options: {             scales: {                 yAxes: [{                     ticks: {                         beginAtZero: true                     }                 }]             }         }     }); 

Even though the canvas is configured with myChart id, I get the following error:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined 

JSFiddle: https://jsfiddle.net/kroejrhx/

回答1:

After revisiting the question, here's your problem: you are using the wrong version of chart.js. According to this section, if you want to use an axis that's time based, you either need to explicitly include moment.js, or use the bundle version.

Changing the resource in your jsfiddle to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js will show the expected chart. No need to change the code at all.

回答2:

If you want to use Chart.js v2.0 then this CDN will work.

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js

文章来源: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js