未捕获的TypeError：无法读取undefined – chart.js的属性’offsetWidth’
我有这个简单的HTML：
这个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 } }] } } });
即使canvas配置了myChart id，我myChart收到以下错误：
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
JSFiddle： https ：//jsfiddle.net/kroejrhx/
重新审视问题之后，这是您的问题：您使用的是错误版本的chart.js 。 根据此部分 ，如果要使用基于时间的轴，则需要显式包含moment.js ，或使用包版本。
将jsfiddle中的资源更改为https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js将显示预期的图表。 根本不需要更改代码。
如果你想使用Chart.js v2.0，那么这个CDN将起作用。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js
您必须使用chart.js的版本2。 如果您使用的是npm ，请在package.json中更新chart.js，例如"chart.js": "^2.1.1", 如果你使用react-chartjs-2 ，你仍然需要确保你的chart.js版本是2或更大。