Flex 元素中的 Chart.js 溢出而不是收缩

Question

我尝试将 Chart.js 的包装器 div 上的最小宽度设置为 0，但是如果您拖动窗口，图表将会增大，然后不会缩小。

我想不通！我唯一能做的就是将宽度设置为 99%，但图表不再与我的其他 div 对齐。我已经研究了好几天了，请帮忙！

问：如何让 Chart.js 的宽度达到 100%，并增大/缩小到其边界大小。

要重现，请转到示例，如果关闭菜单，图表会增大，如果打开菜单，图表不会缩小。它保持其大小并向右溢出。

注意：我的实际项目有两个单独的图表和侧栏组件。因此，计算解决方案在这种情况下不起作用，我不想紧密耦合任何组件来保持良好的实践。

这是我的 StackBlitz 工作示例

以下是展示复制品的图片：

1. 图表大小合适，菜单打开

2. 关闭菜单时图表会变大（尺寸仍然正确）

3. 打开菜单，图表向右溢出

Answer 1

（复制自我的评论。）

我无法运行 StackBlitz（由于 Firefox 中的跟踪保护而导致 JS 错误），因此我无法验证这一点，但我的 Flex 布局中确实存在这个问题，并通过确保在父级上设置

overflow: hidden

来解决它（和祖先）弹性元素。粗略地看一下你的 CSS 就会发现这只是在

.page-wrapper

上完成的。

Answer 2

将画布包裹在宽度为 100% 的 div 中并将画布设置为最大宽度 100% 对我来说很有效：

<div style="width: 100%; position: relative;">
    <canvas id="chart" style="max-width: 100%;"></canvas>
</div>

Answer 3

更新：此解决方案停止与 Chart.js 3 一起使用

我对这样的标记也有类似的问题：

<div style="display: flex; flex-direction: column">
  <h2>...</h2>
  <div class="chart-container" style="position: relative; flex: 1">
    <canvas></canvas>
  </div>
  <span>...</span>
  <span>...</span>
</div>

我最外面的 div 在 css-grid 中，也许这也发挥了作用。

无论如何，我诊断出问题是这样的：即使我将

{ responsive: true, maintainAspectRatio: false }

应用于chart.js的选项，图表的大小也是固定的，这导致图表容器不会缩小（即使应用了

overflow: hidden

） ，我不完全明白为什么）。这导致图表js插入的div元素检测尺寸变化而永远不会改变其高度。

因此，解决方案就是简单地 将画布上的高度覆盖为 100%：

canvas {height: 100%!important}

。

这允许画布容器收缩，从而导致尺寸检测 div 收缩，从而导致画布重新渲染，从而防止出现宽高比问题。

Answer 4

这里您的画布在绝对父级内具有宽度，因此建议使用 JavaScript 动态更改值（在您的情况下是角度）。但由于您正在寻找基于 CSS 的解决方案，因此您可以在 app.components.css 文件中添加以下内容：

.sidebar-wrapper.shrink + div.main-wrapper canvas {
  width: calc(100vw - 40px) !important;
}
.sidebar-wrapper:not(.shrink) + div.main-wrapper canvas {
  width: calc(100vw - 230px) !important;
}

这是工作示例：https://chartjs-overflow-ex-vlsqmn.stackblitz.io/

Answer 5

将画布包裹在最大宽度为 70% 的 div 中对我来说很有效：

<div class="division-chart-wrap">
    <canvas id="chart" ></canvas>
</div>
<style>
      .division-chart-wrap {
        flex: 1 1 18rem;
        min-height: 12rem;
        position: relative;
        max-width: 70%;
      }
</style>

Answer 6

这些解决方案都不适合我，但以下解决方案最终做到了：

• 使用

  width: 100%

  保留原始容器 div - 溢出或最小宽度并不重要。
• 在该容器内，创建另一个 div 并为其指定以下样式：

.innerContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

So now your HTML would look something like:
<div className="originalContainer">
  <div className="innerContainer">
    <canvas width="100%" height="<whatever>" />
  </div>
</div>