В моем графике Chart.js используются две оси Y: обе должны иметь одинаковый масштаб и максимальные / минимальные значения. Я обновляю второй шаг оси Y в зависимости от динамически установленного логического значения, и все работает безупречно. Тем не менее, я хочу обновить вторую ось Y (перерисовать ее), когда я запускаю событие легенды (щелкнув одну из легенд). Я не могу заставить его работать: сюжет обновляется, но мой второй шаг оси Y не меняется.
Вот моя функция рисования. Я прочитал документацию Chart.js, я нашел здесь, но я действительно могу понять, как заполнить мою легенду о событии onClick.
function drawChart(pointsArray, curveFeatures) {
let minX = parseFloat(curveFeatures.minX);
let minY = parseFloat(curveFeatures.minY);
let maxX = parseFloat(curveFeatures.maxX);
let maxY = parseFloat(curveFeatures.maxY);
let stepResult = parseInt(curveFeatures.stepResult);
let startX = parseFloat(curveFeatures.startX);
let endX = parseFloat(curveFeatures.endX);
let upperLimit = parseFloat(curveFeatures.upperLimit);
let lowerLimit = parseFloat(curveFeatures.lowerLimit);
let stepSize;
let borderColour;
let backgroundColour;
if (stepResult === 1) {
stepSize = 0.5;
maxY = parseFloat(maxY.toFixed(2)) + stepSize;
minY = parseFloat(minY.toFixed(2)) - stepSize;
borderColour = "rgba(1, 165, 15, 1)";
backgroundColour = "rgba(1, 165, 15, 0.2)";
} else {
stepSize = 0.01;
maxY = parseFloat(maxY.toFixed(2));
minY = parseFloat(minY.toFixed(2));
borderColour = "rgba(252, 45, 45, 1)";
backgroundColour = "rgba(252, 45, 45, 0.2)";
}
let ctx = document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "Press Signal",
cubicInterpolationMode: "monotone",
fill: false,
borderWidth: 5,
radius: 1,
borderColor: borderColour,
backgroundColor: backgroundColour,
pointBorderColor: borderColour,
pointBackgroundColor: backgroundColour,
data: pointsArray
}, {
label: "Evaluation Windows",
cubicInterpolationMode: "monotone",
fill: true,
borderWidth: 2,
radius: 2,
borderColor: "rgb(94, 233, 255, 1)",
backgroundColor: "rgb(94, 233, 255, 0.2)",
pointBorderColor: "rgb(94, 233, 255, 1)",
pointBackgroundColor: "rgb(94, 233, 255, 0.2)",
data: [{
x: startX,
y: lowerLimit
}, {
x: startX,
y: upperLimit
}, {
x: endX,
y: upperLimit
}, {
x: endX,
y: lowerLimit
}, {
x: startX,
y: lowerLimit
}]
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
animation: {
duration: 2000
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 10
}
},
title: {
display: true,
text: "Press Signal",
fontSize: 30,
padding: 20
},
legend: {
labels: {
fontSize: 16
},
onClick: function(e, legendItem) {
stepSize = 0.01;
// Should I do things, here?
ci.update();
}
},
scales: {
xAxes: [{
display: true,
type: "linear",
position: "bottom",
ticks: {
fontSize: 14,
},
scaleLabel: {
display: true,
fontSize: 16,
fontColor: "black",
labelString: "Position (Abs.) [mm]"
}
}],
yAxes: [{
display: true,
type: "linear",
position: "left",
ticks: {
fontSize: 14,
},
scaleLabel: {
display: true,
fontSize: 16,
fontColor: "black",
labelString: "Force [kN]"
}
}, {
display: true,
type: "linear",
position: "right",
ticks: {
fontSize: 14,
beginAtZero: false,
max: maxY,
min: minY,
stepSize: stepSize
},
afterTickToLabelConversion: function(scaleInstance) {
if (stepResult === 1) {
// set the first and last tick to null so it does not display
// note, ticks[0] is the last tick and ticks[length - 1] is the first
scaleInstance.ticks[0] = null;
scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
// need to do the same thing for this similiar array which is used internally
scaleInstance.ticksAsNumbers[0] = null;
scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
}
}
}]
}
}
});
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я нашел свой путь. Вот отрывок для тех, у кого будет такая же проблема:
onClick: function(event, legendItem) {
let index = 1;
myChart.data.datasets[index].hidden = !myChart.data.datasets[index].hidden;
if (myChart.data.datasets[index].hidden) {
myChart.options.scales.yAxes[index].ticks.max = maxY;
myChart.options.scales.yAxes[index].ticks.min = minY;
myChart.options.scales.yAxes[index].ticks.stepSize = stepSize;
} else {
if (stepResult === 0) {
myChart.options.scales.yAxes[index].ticks.max = 3.5;
myChart.options.scales.yAxes[index].ticks.min = 0;
myChart.options.scales.yAxes[index].ticks.stepSize = 0.5;
}
}
myChart.update();
}