如何让React Chartjs随窗口调整大小

Question

我有这段代码，由于某种原因，当我调整窗口大小时，它会增大，但不会缩小。我想知道如何解决这个问题。

https://codesandbox.io/s/react-chartjs-2-example-1nur4

import React from "react";
import { render } from "react-dom";
import LineDemo from "./LineDemo";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <table style={{ width: "100vw", borderCollapse: "collapse" }}>
      <tbody>
        {Array.from({ length: 4 }, el => "foo")
          .concat(<LineDemo />)
          .map(el => (
            <td style={{ border: "solid" }}>{el}</td>
          ))}
      </tbody>
    </table>
  </div>
);

render(<App />, document.getElementById("root"));

Answer 1

详细了解https://www.chartjs.org/docs/latest/configuration/responsive.html。 重要提示部分提到了如何实现响应能力。它指出

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

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

<div>

元素。然后可以将

render

文件中

LineDemo

组件的

LineDemo.js

函数修改为：

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

这是一个工作示例：https://codesandbox.io/s/react-chartjs-2-example-hzygw

Answer 2

对我有用的是为图表容器添加宽度样式：

<div style={{width: '99%'}}>
    <Bar options={options} data={data} />
</div>

但是，如果我将宽度设置为 100%，它将不起作用，哈哈