Css 如何让React chartjs使用窗口重新调整大小

我有这段代码，由于某种原因，当我调整窗口大小时，它会增长，但不会收缩。我想知道如何补救

从“React”导入React；
从“react dom”导入{render}；
从“/LineDemo”导入LineDemo；
常量样式={
fontFamily：“无衬线”，
textAlign：“居中”
};
常量应用=（）=>(
{Array.from（{length:4}，el=>“foo”）
.concat（）
.map（el=>(
{el}
))}
);
render（，document.getElementById（“根”））；

请详细查看。本节提到如何实现响应能力。它说

Chart.js使用其父容器更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅用于图表画布。然后，可以通过设置容器大小的相对值来实现响应

在您的情况下，折线图的父容器是

元素。然后可以修改

LineDemo.js

文件中

LineDemo

组件的

render

函数，如下所示：

render() {
  return (
    <div style={{ position: "relative", margin: "auto", width: "80vw" }}>
      <h2>Line Example</h2>
      <Line ref="chart" data={data} />
    </div>
  );
}

render（）{
返回(
行示例
);
}

---

下面是一个工作示例：

对于未来的开发人员，文档页面移到了这里：

render() {
  return (
    <div style={{ position: "relative", margin: "auto", width: "80vw" }}>
      <h2>Line Example</h2>
      <Line ref="chart" data={data} />
    </div>
  );
}