如何让 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

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

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

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

Answer 2

详细查看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