Я использую плагин аннотации js для раскрашивания областей на моей точечной диаграмме (код исходной диаграммы ниже). Он работает так, как я ожидаю:
Если я перезагрузлю страницу, она будет отображаться нормально с теми же цветами на графике, но если я переключусь на другую вкладку и вернусь цвета на графике суммируются:
Понятия не имею, почему цвета складываются. Когда я проверяю конфиг 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
}
]
}
}
});