react-chartjs-2甜甜圈图画布无法调整大小

Question

我正在用React创建一个仪表板，我想要显示一些信息的甜甜圈图。我正在跟踪使用chartjs的{​​{3}}，并且我遇到了意外问题。

运行我的应用程序时，仪表板不会显示甜甜圈图， 但是，如果我添加折线图或条形图，它们将按预期显示

这是尝试绘制甜甜圈图时的仪表板，我圈出了我认为该图的画布

this tutorial

这是代码

import React from 'react';
import {Pie, Doughnut} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
           'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: [
        '#B21F00',
        '#C9DE00',
        '#2FDE00',
        '#00A6B4',
        '#6800B4'
      ],
      hoverBackgroundColor: [
      '#501800',
      '#4B5000',
      '#175000',
      '#003350',
      '#35014F'
      ],
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Doughnut
          data={state}
          options={{
            width:"400",
            height:"400",
            responsive: true,
            maintainAspectRatio: true,
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}

我研究了以下解决方案 问题，但仍然无法正常工作。请注意，饼图也无法正确显示，只有条形图和折线图可以正确显示

TL; DR：React中的Chart-js未显示甜甜圈图，但其他图表也起作用。