Chart.js柱状图数据集较小时显示空白问题排查

核心问题 #

你的代码存在两个关键问题，共同导致图表空白：缺失x轴对应的labels数组，以及**<canvas>未设置高度且开启了maintainAspectRatio: false**，小数据集时这两个问题的影响会更突出。

具体分析 #

1. 缺少labels数组：Chart.js的柱状图需要data.labels来定义每个柱子对应的x轴刻度/类别。你仅提供了datasets.data却无对应标签，当数据点数量较多时，x轴会因无明确刻度被自动压缩到极致，视觉上完全看不到柱子；小数据集时，这种压缩导致的布局异常更易触发空白。
2. canvas无高度+maintainAspectRatio: false：该配置让图表完全依赖容器尺寸，但你的<canvas>未设置高度样式，容器高度为0时，图表自然无法渲染显示。

修复后的代码 #

HTML部分（给canvas设置明确高度） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.1/chart.umd.js"></script>
<canvas id="chart" style="height: 300px;"></canvas>

JavaScript部分（添加labels数组并修正x轴配置） #

new Chart(
    document.getElementById('chart'),
    {
        type: 'bar',
        data: {
            // 生成与数据长度匹配的labels，可替换为业务实际标签
            labels: Array.from({length: 54}, (_, i) => i+1),
            datasets: [
                {
                    label: 'Conversions',
                    data: [0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true                   
                },
                x: {
                    // 柱状图x轴默认是category类型，无需beginAtZero（该配置适用于线性轴）
                    type: 'category'
                }
            }
        }
    }
);

额外提示 #

• 若不需要显示x轴刻度文字，可设置x.ticks.display: false，但必须保留labels数组，否则Chart.js无法正确计算柱子布局。
• 使用maintainAspectRatio: false时，务必给canvas或其父容器设置明确高度，避免容器高度为0导致图表不渲染。

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