Chart.js 没有根据容器宽度的变化调整大小

Question

我正在创建一个包含多个 Chart.js 的仪表板。仪表板具有侧边栏导航，单击切换按钮时可以将其最小化。这增加了容器的宽度。

如图所示，图表的容器不适合其高度。

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

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

HTML：

    <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;
        }
    }

JS：

/*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,
        //  },
        // },
    },
});

Answer 1

尝试将其添加到你的 JS 选项中：

maintainAspectRatio: false

Answer 2

对于 Chart.js V4，如果您希望图表既响应又维持调整大小时的纵横比，以下内容对我有用：

将图表包装在包含以下样式的专用 div 中

.chart-container {
 width: 100%;
 height: 100%;
 aspect-ratio: 2; // REPLACE with desired aspect ratio
}

设置以下图表选项

const options = {
  ...
  aspectRatio: 2, // REPLACE with desired aspect ratio
  responsive: true,
  maintainAspectRatio: true,
  ...
}

此解决方案的唯一缺点是您必须在两个位置设置宽高比：图表本身及其容器。 请跟踪此

GH问题以获取有关此问题的更多信息。

Chart.js 版本：4.4.1