时间戳

首页 > 解决方案 > 如何在 React.js 中调整 Chart.JS 元素的大小？

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

问题描述

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

标签： javascripthtmlcssreactjschart.js

解决方案

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

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

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

推荐阅读