在 React Typescript 中未定义 ChartJS 宽度答案

【问题标题】：ChartJS width undefined in React Typescript在 React Typescript 中未定义 ChartJS 宽度
【发布时间】：2020-03-30 00:31:45
【问题描述】：

我正在使用 react-chartjs-2 和 typescript + react 并尝试创建一个简单的条形图，但我的浏览器控制台抱怨 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')
)

BarChartComponent.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,
                }}
            />
        );
    }
}

任何建议将不胜感激。

【问题讨论】：

标签： reactjs typescript chart.js react-chartjs

【解决方案1】：

我相信如果将maintainAspectRatio设置为false，则必须明确定义尺寸。

【讨论】：