css - 如何让 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 . Important Note部分提到了如何实现响应能力。它指出

Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size.

在您的情况下，折线图的父容器是 <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