Chart.js: обновить второй шаг оси Y при нажатии на легенду

В моем графике 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;
                        }
                    }
                }]
            }
        }
    });
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 148
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел свой путь. Вот отрывок для тех, у кого будет такая же проблема:

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

Другие вопросы по теме