无法手动和以编程方式放大浏览器窗口

Question

const options = {
      responsive: true,
};

当我缩小浏览器大小时，它会调整大小，但如果我放大浏览器大小，则不会（图表保持相同大小）。

我有多个图表。我想处理它。

我尝试用

onResize : function() {}

解决这个问题，但它也只有在缩小窗口尺寸时才有效。

Answer 1

Chart、js v4 及更高版本中存在错误。不幸的是它已经存在了一段时间并且尚未修复。这是 github 问题

这里有一些可以帮助您的热修复（取自 github 问题）：

1. 设置父容器的长宽比

<div class="chart-container" style="aspect-ratio: 2">
    <canvas id="chart"></canvas>
</div>

2. 将画布大小设置为100%

canvas {
   width: 100% !important;
   height: 100% !important;
}

3. 添加一个空的兄弟元素（这就是我使用的）

return (
  <Box>
    <div>&nbsp;</div>
    <Chart .../>
  </Box>
)