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

【问题标题】：How to resize Chart.JS element in React.js?如何在 React.js 中调整 Chart.JS 元素的大小？
【发布时间】：2019-12-13 15:23:55
【问题描述】：

我有一个 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%？

【问题讨论】：

您是否在使用像Bulma 或Bootstrap 这样的CSS 库？如果是这样，您可以使用columns，这只是您想要做的非常重要的事情。

标签： javascript html css reactjs chart.js

【解决方案1】：

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

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

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

【讨论】：

这对我来说并没有完全解决。对于其他卡住的人，您可能需要创建一个专用容器（例如 <div class="chart-container" style="position: relative; height:40vh; width:80vw"> <Doughnut/> </div> ）有关更多信息，请参阅此文档部分：chartjs.org/docs/latest/general/responsive.html

【解决方案2】：

将其包裹在divContainer 中并设置宽度和高度。

例如：

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

【讨论】：

【解决方案3】：

为我做以下工作：

在<Doughnut /> 组件上设置高度和宽度。
将maintainAspectRation 设置为false。

结果如下：

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

【讨论】：