我有这个简单的html:
<canvas id="myChart" width="400" height="400"></canvas>
和这个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
}
}]
}
}
});
即使画布配置了myChart
id,我也会收到以下错误:
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
显示预期的图表。完全不需要更改代码。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句