Chart.js 图形溢出容器

Question

我在容器中显示 Chart.js 图表，它们不尊重它们的大小，而是超出了它们。

在图表配置中我有：

responsive: true,
maintainAspectRatio: false,

html如下：

<div class="graph-container">
    <div class="graph-wrapper">
        <canvas id="myChart" class="graph-canvas" width="300" height="300"></canvas>
    </div>
</div>

相应的 CSS 是：

.graph-container {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: $blue;
    display: none;
}

.graph-wrapper {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: block;
}

注意：.graph-container 上的 display: none; 在单击按钮时会发生变化。

容器以正确的大小显示，但只是被图表大大覆盖了。

任何想法将不胜感激。

谢谢
杰克

Answer 1

删除我的canvas html 元素的高度和宽度属性解决了我的问题。这样做之后，图形将停止以方形纵横比显示并适应它的容器。