Javascript React-chartjs-2甜甜圈图表画布无法调整大小

我正在用react制作一个仪表板，我想用甜甜圈图表来显示一些信息。我正在使用

chartjs

和跟踪，我遇到了一个意外问题。

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

这是试图绘制甜甜圈图表时的仪表板，我已经圈出了我认为是图表画布的部分

这是密码

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>
    );
  }
}

从“React”导入React；
从'react-chartjs-2'导入{Pie，Doughnut}；
常量状态={
标签：[“一月”、“二月”、“三月”，
“四月”、“五月”]，
数据集：[
{
标签:"雨量",，
背景颜色：[
“#B21F00”，
"C9DE00",，
#2FDE00"，
“#00A6B4”，
“#6800B4”
],
悬停背景颜色：[
'#501800',
"4B5000",，
'#175000',
'#003350',
"35014F"
],
数据：[65,59,80,81,56]
}
]
}
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

我已经研究了下面的解决方案 问题，但它仍然不起作用。请注意，饼图也没有正确显示，只有条形图和折线图显示正确

---

TL；DR:react中的Chart js没有显示甜甜圈图表，但其他图表可以工作。

您发布的代码在这里@xplo4d对我来说运行良好，这有点令人困惑。我不确定哪里出了问题…@xplo4d现在已经修复，结果我需要升级我的chartjs版本。当我安装它时，我使用命令npm install--save chart.js@^1.1.1 react dom，我将它更改为^2.9.0版本，现在它可以工作了