Javascript 如何在React.JS中调整Chart.JS元素的大小？

我有一个React组件

Webstats

，它从React-chartjs-2库返回一个甜甜圈图。下面是代码的外观：

const Webstats = () => {
  //code to create chart.
  return <Doughnut data={pd} />;
}

但问题是，与注销按钮相比，图表大小太大

我想使图表尺寸变小，大约为

宽度的30%。我试过这些东西：

return <Doughnut data={pd} width="30%"/>;

返回；

及

返回(
//html的其余部分
)

而且

return (
    <div width="30%">
      <Doughnut data={pd} />
    </div>
  );

返回(
);

但这些都没有给我想要的结果。如何将图表调整为

宽度（和高度自动调整）的30%？

您需要将

MaintaintAspectratio

设置为false的状态，以便使用传递到图表中的宽度和高度道具

为了使Chart.js符合自定义大小，您需要将

maintaintAspectratio

设置为false

您使用的CSS库是否与或类似？如果是这样的话，你可以使用，这将是你试图做的非常有意义的事情。这并不能解决我的问题。对于其他卡住的人，您可能需要创建一个专用容器（例如

），有关更多信息，请参阅本文档部分：

return (
    <div style={rowC}>
      <Webstats width="30%" />
      // rest of html
)

return (
    <div width="30%">
      <Doughnut data={pd} />
    </div>
  );

<Doughnut
  data={data}
  width={"30%"}
  options={{ maintainAspectRatio: false }}
/>