如何让React chartjs通过窗口重新调整大小

fd3cxomn 于 2023-10-18 发布在 Chart.js

关注(0)|答案(2)|浏览(169)

我有这样一段代码，由于某种原因，当我调整窗口大小时，它会变大，但不会缩小。我在想怎么补救。
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"));

chart.js

来源：https://stackoverflow.com/questions/57385938/how-to-get-react-chartjs-to-resize-back-down-with-window

2条答案

按热度按时间

t5zmwmid1#

详细查看https://www.chartjs.org/docs/latest/configuration/responsive.html。重要说明部分提到了如何实现响应性。它指出
Chart.js使用其父容器来更新画布渲染和显示大小。但是，该方法要求容器相对定位并且仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应性。
在本例中，折线图的父容器是<div>元素。然后可以修改LineDemo.js文件中LineDemo组件的render函数，如下所示：

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

赞(0）回复(0）举报 2023-10-18

lyfkaqu12#

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

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

但是，如果我设置宽度100%，它不会工作哈哈

赞(0）回复(0）举报 2023-10-18

我来回答

如何让React chartjs通过窗口重新调整大小

2条答案

相关问题

热门标签

最新问答