React Typescript中未定义ChartJS宽度

Question

我使用了带有typescript+react的react-chartjs-2，并试图创建一个简单的条形图，但我的浏览器控制台抱怨width未定义。我不确定下面是否有我没有配置的内容？

浏览器控制台错误：

Uncaught TypeError: Cannot read property 'width' of undefined
at n.draw (Chart.js:15474)
at Object.draw (Chart.js:7231)
at $t.draw (Chart.js:9825)
at $t.render (Chart.js:9782)
at Object.callback (Chart.js:2204)
at Object.advance (Chart.js:3528)
at Object.startDigest (Chart.js:3501)
at Chart.js:3490

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import BarChartComponent from './components/BarChartComponent';
ReactDOM.render(
<div>
<BarChartComponent />
</div>,
document.querySelector('#app')
)

条形图组件.tsx

import * as React from 'react';
import { Bar } from 'react-chartjs-2';
export default class BarChartComponent extends React.Component {
chartData = {
labels: ['CA', 'TX'],
datasets:[
{
label:'Population',
data:[
23000,
10000
],
backgroundColor:[
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)'
]
}
]
};
render() {
return (
<Bar 
data={this.chartData}
options={{
title:{
display: true,
text: "Populations",
fontSize: 25
},
legend:{
display: true,
position: "center"
},
maintainAspectRatio: false,
}}
/>
);
}
}

如有任何建议，我们将不胜感激。

Answer 1

我认为，如果将maintainAspectRatio设置为false，则必须明确定义维度。