javascript - 如何在 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}> 宽度的 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

documentation for ChartJS说明您需要将 maintainAspectRatio 设置为 false 才能使用您传递到图表中的宽度和高度属性。

In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false.

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