Chartjs注解插件彩盒colors来回切换后求和

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

发现问题。 创建新图表实例后，注册新插件。 更改选项卡后，插件没有取消注册，并且再次注册了相同的插件。 添加了使用 Chart.pluginService.unregister() 方法的手动注销。