Chart.js v2.7.2与Angular Chart.js v1下移除Q1和Q2柱状图间隔的问题求助

大家好，我现在在做一个基于AngularJS + Chart.js v2.7.2 + Angular Chart.js v1的堆叠柱状图，遇到了一个很棘手的问题：

当Q1和Q2对应的部分数据值为0时，即使我把这些0换成null、undefined或者NaN，图表里Q1和Q2的标签之间还是会留出不必要的空白间隔。那些值为0的柱子明明已经不显示了，但Chart.js还是会给它们预留空间，导致Q1和Q2不能紧凑地挨在一起，图表看起来很松散。

我已经尝试了好几种方法来解决，但都没效果：

• 把数据里的0替换成null
• 过滤掉所有值都是0的数据集
• 给每个数据集设置spanGaps: true
• 调整Y轴刻度，隐藏0值并设置suggestedMin为1

下面是我的完整代码，麻烦各位帮我看看问题出在哪，怎么才能让Q1和Q2的柱子紧密排列，去掉中间的空白间隔？

JavaScript 代码 #

var app = angular.module("chartApp", ["chart.js"]);

app.controller("ChartController", function ($scope) {
    $scope.chartJsProps = {
        data: [
            [100, null], [110, null], [200, null], [210, null], [210, null], [220, 0],
            [0, 300], [null, 290], [null, 320], [null, 340], [null, 350], [null, 370]
        ],
        type: "bar",
        colors: [
            "#803690", "#00ADF9", "#46BFBD", "#fb3b3b", "#FDB45C",
            "#949FB1", "#4D5360", "#4cbfbc", "#98bbcc", "#ff8d30",
            "#824670", "#dcdcdc"
        ],
        labels: ["Q1", "Q2"],
        labelsCol: "quarter",
        series: [],
        options: {
            responsive: true,
            maintainAspectRatio: true,
            title: {
                display: true,
                text: "Chart",
                position: "top"
            },
            legend: {
                display: false,
                position: "bottom",
                labels: {
                    fontColor: "rgb(66, 66, 66)",
                    fontSize: 12,
                    padding: 10,
                    boxWidth: 40
                }
            },
            layout: {
                padding: 20
            },
            tooltips: {
                enabled: true,
                mode: "nearest",
                intersect: true
            },
            elements: {
                point: {
                    radius: 3,
                    hoverRadius: 4,
                    hitRadius: 2
                }
            },
            scales: {
                xAxes: [{
                    type: "category",
                    stacked: true,
                    categoryPercentage: 0.8,
                    barPercentage: 0.9,
                    gridLines: { display: false },
                    ticks: { fontSize: 11 }
                }],
                yAxes: [{
                    stacked: true,
                    gridLines: { display: false },
                    ticks: { fontSize: 11, fontColor: "#803690", beginAtZero: false }
                }]
            }
        },
        datasetOverride: [
            {
                label: "jan_actual(sum)",
                type: "bar",
                backgroundColor: "#803690",
                yAxisID: "y-axis-0",
                stack: "grp_A"
            },
            {
                label: "jan_target(sum)",
                type: "bar",
                backgroundColor: "#00ADF9",
                yAxisID: "y-axis-0",
                stack: "grp_T"
            },
            {
                label: "feb_actual(sum)",
                type: "bar",
                backgroundColor: "#46BFBD",
                yAxisID: "y-axis-0",
                stack: "grp_A"
            },
            {
                label: "feb_target(sum)",
                type: "bar",
                backgroundColor: "#fb3b3b",
                yAxisID: "y-axis-0",
                stack: "grp_T"
            },
            {
                label: "mar_actual(sum)",
                type: "bar",
                backgroundColor: "#FDB45C",
                yAxisID: "y-axis-0",
                stack: "grp_A"
            },
            {
                label: "mar_target(sum)",
                type: "bar",
                backgroundColor: "#949FB1",
                yAxisID: "y-axis-0",
                stack: "grp_T"
            },
            {
                label: "apr_actual(sum)",
                type: "bar",
                backgroundColor: "#4D5360",
                yAxisID: "y-axis-0",
                stack: "grp_Q2_A"
            },
            {
                label: "apr_target(sum)",
                type: "bar",
                backgroundColor: "#4cbfbc",
                yAxisID: "y-axis-0",
                stack: "grp_Q2_T"
            },
            {
                label: "may_actual(sum)",
                type: "bar",
                backgroundColor: "#98bbcc",
                yAxisID: "y-axis-0",
                stack: "grp_Q2_A"
            },
            {
                label: "may_target(sum)",
                type: "bar",
                backgroundColor: "#ff8d30",
                yAxisID: "y-axis-0",
                stack: "grp_Q2_T"
            },
            {
                label: "jun_actual(sum)",
                type: "bar",
                backgroundColor: "#824670",
                yAxisID: "y-axis-0",
                stack: "grp_Q2_A"
            },
            {
                label: "jun_target(sum)",
                type: "bar",
                backgroundColor: "#dcdcdc",
                yAxisID: "y-axis-0",
                stack: "grp_Q2_T"
            }
        ],
        labelsColType: "category"
    };
    // 尝试过滤全0的数据集
    $scope.chartJsProps.data = $scope.chartJsProps.data.filter(dataSet => 
        dataSet.some(value => value !== 0)
    );
    // 调整Y轴刻度，隐藏0值
    $scope.chartJsProps.options.scales.yAxes[0].ticks = {
        suggestedMin: 1, // 确保最小值不为0
        callback: function (value) {
            return value !== 0 ? value : null; // 隐藏0值刻度
        }
    };

    // 给每个数据集设置spanGaps
    $scope.chartJsProps.datasetOverride.forEach(dataset => {
        dataset.spanGaps = true;
    });
});

HTML 代码 #

<!DOCTYPE html>
<html lang="en" ng-app="chartApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
</head>
<body ng-controller="ChartController">
    <canvas  
        id="base" class="chart-base" 
        chart-click="onChartJsClick" 
        chart-data="chartJsProps.data" 
        chart-labels="chartJsProps.labels" 
        chart-colors="chartJsProps.colors" 
        chart-pause="'running'" 
        chart-dataset-override="chartJsProps.datasetOverride" 
        chart-options="chartJsProps.options" 
        chart-series="chartJsProps.series" 
        chart-type="chartJsProps.type">
    </canvas>
    <script src="app.js"></script>
</body>
</html>

希望各位能帮我找到问题所在，让Q1和Q2的柱子可以紧凑排列，去掉中间的空白间隔，非常感谢！

备注：内容来源于stack exchange，提问作者ronaldino