chart.js:在图例单击时刷新第二个Y轴步骤

my chart.js plot使用两个y轴:两个y轴必须具有相同的scale和max/min值。我更新了第二个y轴步骤,这取决于一个布尔值,我的数据设置和一切都是完美的工作。不过,我想在触发图例事件(单击其中一个图例)时更新第二个Y轴(重新绘制)。我真的不能让它工作:情节刷新,但我的第二个y轴步骤没有改变。

这是我的绘图功能。我已经阅读了我找到的chart.js文档 here ,但我真的能理解如何填补我的传奇事件。

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;
                        }
                    }
                }]
            }
        }
    });
}