Chartjs图表不尊重容器的高度

Question

https://dev.meteo.cam/detail?view=graph上有3个图表。他们都应该和高度保持200px。但他们没有。相反，他们以某种方式打破并重叠。为什么是这样？我使用了与示例中相同的代码。

有趣的是，chartjs-hidden-iframe确实具有正确的高度，但不是下面的canvas。

来自http://www.chartjs.org/docs/latest/general/responsive.html的示例代码：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
   <canvas id="chart"></canvas>

https://dev.meteo.cam/detail?view=graph上使用的代码

<div class="spaced-mv graphContainer">
    <canvas id="graphTemp"></canvas>
</div>
<style>
    .graphContainer {
        position: relative;
        height:200px;
        width:100%
    }
</style>

至少在移动设备上看起来不错。首先，我在桌面上使用了画布本身的固定值（宽度= 100，高度= 25），但在移动设备上的高度非常小。我只需要一个适用于宽屏和小屏幕的良好解决方案。

Answer 1

可能会尝试保持宽高比，因此您可能需要关闭该选项

options: {
    maintainAspectRatio: false
}