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

Question

我有一个 React 组件Webstats，它从react-chartjs-2库返回一个甜甜圈图。下面是代码的样子：

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

我在另一个名为Dashboard. 我想在注销按钮旁边显示图表。两者应该在同一行。flex为此，我使用了 css 的属性。

const rowC = {
  display: "flex",
  flexDirection: "row"
};

const Dashboard = () => {
  return (
    <div style={rowC}>
      <Webstats />
      <Link to="/">
        <div>
          <button onClick={auth.logout}>Logout</button>
        </div>
      </Link>
    </div>
  );
};

export default Dashboard;

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

我想让图表尺寸变小，大约是<div style={rowC}>. 我试过这些东西：

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

和

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

并且

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

但是这些都没有给我想要的结果。如何将图表大小调整为 30% 的宽度（和高度自动调整）<div style={rowC}>？

Answer 1

ChartJS的文档指出，您需要将其设置maintainAspectRatio为 false 才能使用您传递到图表中的宽度和高度道具。

为了让 Chart.js 遵守自定义大小，您需要将其设置maintainAspectRatio为 false。

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