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

Question

我有一個 React 組件Webstats ，它從react-chartjs-2庫返回一個圓環圖。 下面是代碼的樣子：

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

我在另一個名為Dashboard的組件中使用這個組件。 我想在注銷按鈕旁邊顯示圖表。 兩者應該在同一行。 為此，我使用 css 的flex屬性。

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}>寬度的 30%。 我試過這些東西：

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

和

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

並且

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

但是這些都沒有給我想要的結果。 如何將圖表調整為<div style={rowC}>寬度（和高度自動調整）的 30%？

Answer 1

ChartJS的文檔指出，您需要將maintainAspectRatio設置為 false 才能使用您傳遞到圖表中的寬度和高度道具。

為了讓 Chart.js 遵守自定義大小，您需要將maintainAspectRatio AspectRatio 設置為 false。

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

Answer 2

將其包裹在div容器中並設置寬度和高度。

前任：

<div style={{height:"60vh",position:"relative", marginBottom:"1%", padding:"1%"}}>
     <Doughnut options={options} data={chartData} />
</div>

Answer 3

為我做以下工作：

1. 在<Doughnut />組件上設置高度和寬度。
2. 將maintainAspectRation 設置為false。

結果如下：

<Doughnut
  data={data}
  height="200px"
  width="200px"
  options={{ maintainAspectRatio: false }}
/>