我正在创建一个有多个Chart.js的 Jmeter 板。 Jmeter 板有边栏导航，当单击切换按钮时可以最小化。这增加了容器的宽度。
如图所示，图表的容器不适合其高度。

但是如果我为canvas标签添加CSS，它将使用CSS中指定的高度。但是它会拉伸图表并使其模糊。

另外，如果我将边栏切换到最小化，图表的宽度会增加，但当我将边栏切换到最大化时，图表的宽度不会根据主容器的宽度而减少。正如你所看到的，黑色部分扩展到了视口之外。

超文本：

<div class="graph1">
                    <div>
                        <h5>Profit & Loss (Column Grouped Chart)</h5>
                        <canvas id="myChart1"></canvas>
                    </div>
                    <div>
                        <h5>Fuel Consumed (Litres)</h5>
                        <canvas id="myChart2"></canvas>
                    </div>
                    <div>
                        <h5>Fleet Usage</h5>
                        <canvas id="myChart3"></canvas>
                    </div>
                </div>

CSS：

.graph1 {
        position: relative;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-gap: 1rem;
        height: 26rem;
        margin-bottom: 1.5rem;

        & > div {
            padding: 1rem;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 0.6rem;
        }

        canvas {
            width: 100%;
            min-height: 26rem;
        }
    }

联森：

/*Chart1*/
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red'],
        datasets: [
            {
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3, 12],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 99, 132, 1)',
                ],
                borderWidth: 1,
            },
        ],
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        // scales: {
        //  y: {
        //      beginAtZero: true,
        //  },
        // },
    },
});