Chartjs注释插件彩色框的颜色在来回切换后求和

Question

我正在使用chartjs注释插件为散点图上的框区域着色（下面的初始图表代码）。它按我的预期工作：

如果重新加载页面，它会以图表上的相同颜色重新显示，但是如果我切换到另一个选项卡并返回，则图表上的颜色似乎可以累加：

我不知道为什么颜色会累加。当我检查initChart配置时，它具有相同的9个注解，没有其他注解。对于数据集，我具有自定义图像，如图表所示。图表的实例也在开关上更改。

var ctx = document.getElementById('chart-container');

    var initChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: customDatasets
        },
        options: {
            onClick: function (evt) {
                let element = initChart.getElementAtEvent(evt);
                if (element && element.length) {
                    let index = element[0]._datasetIndex;
                    let dataset = initChart.data.datasets[index];
                    openPerson(dataset.data[0].personId);
                }
            },
            onHover: function(evt) {
                let point = this.getElementAtEvent(evt);
                if (point.length) {
                    evt.target.style.cursor = 'pointer';
                } else {
                    evt.target.style.cursor = 'default';      
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    gridLines : {
                        display : false
                    },
                    ticks: {
                        max: 9,
                        min: 0
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'X axis'
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display : false
                    },
                    ticks: {
                        max: 9,
                        min: 0
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Y axis'
                    }
                }]
            },
            tooltips: {
                mode: 'dataset',
                displayColors: false,
                callbacks: {
                    beforeBody: function (d, t) {
                        let datasetIndex = d[0].datasetIndex;
                        return t.datasets[datasetIndex].label;
                    }
                }
            },
            hover: {
                animationDuration: 0 // duration of animations when hovering an item
            },
            annotation: {
                annotations: [
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 0,
                        xMax: 3,
                        yMin: 0,
                        yMax: 3,
                        backgroundColor: "rgba(255, 0, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 6,
                        xMax: 9,
                        yMin: 6,
                        yMax: 9,
                        backgroundColor: "rgba(128, 225, 0, 0.4)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 0,
                        xMax: 3,
                        yMin: 3,
                        yMax: 6,
                        backgroundColor: "rgba(255, 0, 0, 0.1)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 3,
                        xMax: 6,
                        yMin: 0,
                        yMax: 3,
                        backgroundColor: "rgba(255, 0, 0, 0.1)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 0,
                        xMax: 3,
                        yMin: 6,
                        yMax: 9,
                        backgroundColor: "rgba(255, 255, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 6,
                        xMax: 9,
                        yMin: 0,
                        yMax: 3,
                        backgroundColor: "rgba(255, 255, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 3,
                        xMax: 6,
                        yMin: 3,
                        yMax: 6,
                        backgroundColor: "rgba(255, 255, 0, 0.2)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 6,
                        xMax: 9,
                        yMin: 3,
                        yMax: 6,
                        backgroundColor: "rgba(128, 225, 0, 0.3)",
                        borderWidth: 0
                    },
                    {
                        drawTime: "beforeDatasetsDraw",
                        type: "box",
                        xScaleID: "x-axis-1",
                        yScaleID: "y-axis-1",
                        xMin: 3,
                        xMax: 6,
                        yMin: 6,
                        yMax: 9,
                        backgroundColor: "rgba(128, 225, 0, 0.3)",
                        borderWidth: 0
                    }
                ]
            }
        }
    });

Answer 1

发现了问题。创建新的图表实例后，插件描述符的数量增加了，因为beforeDatasetsDraw描述符被复制了，不知道为什么。简单快速的修复方法是从initChart.$plugins.descriptors]中删除重复项