我有一個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;

但問題是，與注銷按鈕相比，圖表尺寸太大。

我想把圖表做得小一些，大約是& ltdiv style = { rowC } & gt。我試過這些東西:

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

和

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

此外

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

但是這些都沒有給我想要的結果。如何將圖表的大小調整為& ltdiv style = { rowC } & gt？

ChartJS的文檔指出，您需要將maintainAspectRatio設置為false，以便使用傳遞到圖表中的寬度和高度屬性。

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

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

為我做以下工作:

在& lt甜甜圈/& gt；組件。 將maintainAspectRation設置為false。 這是結果的樣子:

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

將其包裝在div容器中，并設置寬度和高度。

例如:

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

對我有用的是使用style屬性手動設置寬度，并將maintainaspectpratio:false添加到如下選項中:

<Pie
    style={{ width: "500px" }}
    options={{
      maintainAspectRatio: false}} />