Javascript 在chartjs 2.0中为画布设置完整的背景色

基本上，我的问题与这里的问题相似

它有一个理想的JSFIDLE链接

但它不适用于ChartJS2.*（我使用的是chart.min.bundle.jsv2.1.6）

我正在尝试扩展条形图以显示多个堆叠条形图。同时，我需要分离出条形图的背景

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar);
var helpers = Chart.helpers;
Chart.controllers.groupableBar = Chart.controllers.bar.extend({
    calculateBarX: function (index, datasetIndex) {
        // position the bars based on the stack index
        var stackIndex = this.getMeta().stackIndex;
        return Chart.controllers.bar.prototype.calculateBarX.apply(this, [index, stackIndex]);
    },
    hideOtherStacks: function (datasetIndex) {
        var meta = this.getMeta();
        var stackIndex = meta.stackIndex;

        this.hiddens = [];
        for (var i = 0; i < datasetIndex; i++) {
            var dsMeta = this.chart.getDatasetMeta(i);
            if (dsMeta.stackIndex !== stackIndex) {
                this.hiddens.push(dsMeta.hidden);
                dsMeta.hidden = true;
            }
        }
    },
    unhideOtherStacks: function (datasetIndex) {
        var meta = this.getMeta();
        var stackIndex = meta.stackIndex;

        for (var i = 0; i < datasetIndex; i++) {
            var dsMeta = this.chart.getDatasetMeta(i);
            if (dsMeta.stackIndex !== stackIndex) {
                dsMeta.hidden = this.hiddens.unshift();
            }
        }
    },
    calculateBarY: function (index, datasetIndex) {
        this.hideOtherStacks(datasetIndex);
        var barY = Chart.controllers.bar.prototype.calculateBarY.apply(this, [index, datasetIndex]);
        this.unhideOtherStacks(datasetIndex);
        return barY;
    },
    calculateBarBase: function (datasetIndex, index) {
        this.hideOtherStacks(datasetIndex);
        var barBase = Chart.controllers.bar.prototype.calculateBarBase.apply(this, [datasetIndex, index]);
        this.unhideOtherStacks(datasetIndex);
        return barBase;
    },
    getBarCount: function () {
        var stacks = [];
        // put the stack index in the dataset meta
        Chart.helpers.each(this.chart.data.datasets, function (dataset, datasetIndex) {
            var meta = this.chart.getDatasetMeta(datasetIndex);
            if (meta.bar && this.chart.isDatasetVisible(datasetIndex)) {
                var stackIndex = stacks.indexOf(dataset.stack);
                if (stackIndex === -1) {
                    stackIndex = stacks.length;
                    stacks.push(dataset.stack);
                }
                meta.stackIndex = stackIndex;
            }
        }, this);

        this.getMeta().stacks = stacks;
        return stacks.length;
    },
    initialize: function (data) {
        debugger;
        var self = data;
        var originalBuildScale = self.buildScale;
        self.buildScale = function () {
            originalBuildScale.apply(this, arguments);
            debugger;
            var ctx = self.chart.ctx;
            var scale = self.scale;
            var originalScaleDraw = self.scale.draw;
            var barAreaWidth = scale.calculateX(1) - scale.calculateX(0);
            var barAreaHeight = scale.endPoint - scale.startPoint;
            self.scale.draw = function () {
                originalScaleDraw.call(this, arguments);
                scale.xLabels.forEach(function (xLabel, i) {
                    ctx.fillStyle = data.labelBackgrounds[i];
                    ctx.fillRect(
                            scale.calculateX(i - (scale.offsetGridLines ? 0.5 : 0)),
                            scale.startPoint,
                            barAreaWidth,
                            barAreaHeight);
                    ctx.fill();
                });
            };
        };
        Chart.controllers.bar.prototype.initialize.apply(this, arguments);
    }
});

附言：我不得不提出一个新问题，因为我的名声不允许我对此事发表评论

var data = {
    labels: ["Label1","Label2","Label2","Label2",],
    labelBackgrounds: ["rgba(120,220,220,0.2)", "rgba(220,120,220,0.2)", "rgba(220,220,120,0.2)", "rgba(120,120,220,0.2)"],
    datasets: [
        {
            label: "Pass",
            backgroundColor: "rgba(3,166,120,0.7)",
            data: [40,50,30,45],
            stack: 1
        },
        {
            label: "Fail",
            backgroundColor: "rgba(212,82,84,0.7)",
            data: [40,50,30,45],
            stack: 1
        },
        {
            label: "Not run",
            backgroundColor: "rgba(89,171,227,0.7)",
            data: [40,50,30,45],
            stack: 1
        },
        {
            label: "Pass",
            backgroundColor: "rgba(3,166,120,0.7)",
            data: [40,50,30,45],
            stack: 2
        },
        {
            label: "Fail",
            backgroundColor: "rgba(212,82,84,0.7)",
            data: [40,50,30,45],
            stack: 2
        },
        {
            label: "Not run",
            backgroundColor: "rgba(89,171,227,0.7)",
            data: [40,50,30,45],
            stack: 2
        }
    ]
};