如何在Chart.js中保持图表区域尺寸固定？

当使用Chart.js绘制柱状图，切换不同量级的数据时，Y轴刻度标签的宽度差异会导致图表绘图区域被挤压，无法保持固定尺寸。直接设置padding只能增加整体空白，无法解决轴宽度变化的问题，可通过以下两种方式解决：

方法1：固定布局左侧内边距 #

通过layout.padding.left设置固定的左侧空间，确保Y轴标签有足够的展示区域，不会挤压绘图区：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>

    <body>

        <select name="nation_select" id="nation_dropdown" onchange=update_plot()>
            <option value="nation_1">Nation 1</option>
            <option value="nation_2">Nation 2</option>
        </select>
        <div><canvas id="canvas_national_ts" width="1000" height="480"></canvas></div>

        <script>

            // Make plot
            function update_plot() {
                nation_selected = document.getElementById('nation_dropdown').value;

                // Set the data
                var time = [1,2,3,4,5];
                if (nation_selected == 'nation_1') {var data = [1,2,1,3,2];}
                if (nation_selected == 'nation_2') {var data = [1000000,1040000,970000,1200000,900000];}

                // Make a plot
                const ctx_national_ts = document.getElementById('canvas_national_ts');
                if (Chart.getChart(ctx_national_ts)) {
                    Chart.getChart(ctx_national_ts).destroy();
                };
                var chart_national_ts = new Chart(ctx_national_ts, {
                    type: 'bar',
                    data: {
                        labels: time,
                        datasets: [{
                            data: data,
                        }]
                    },
                    options: {
                        layout: {
                            padding: {
                                left: 80 // 固定左侧空间，根据最长Y轴标签调整数值
                            }
                        },
                        maintainAspectRatio: false // 严格遵循canvas设置的宽高，避免自动缩放
                    }
                })
            }

            // Initial plot
            update_plot();

        </script>
    </body>
</html>

方法2：设置Y轴最小宽度 #

通过scales.y.minWidth定义Y轴的最小宽度，确保无论标签长短，轴区域都保持足够宽度：

options: {
  scales: {
    y: {
      minWidth: 80 // 设置Y轴最小宽度
    }
  },
  maintainAspectRatio: false
}

说明 #

• maintainAspectRatio: false用于强制图表遵循canvas的宽高设置，避免自动调整比例导致的尺寸变化。
• 数值80可根据实际最长Y轴标签的宽度调整，确保标签完全显示且不挤压绘图区。

内容的提问来源于stack exchange，提问作者Michael Erb