Chart.js：在图例点击时刷新第二个Y轴步骤

Posted 2021-04-20

我的Chart.js图使用两个Y轴：它们都必须具有相同的比例和最大/最小值。我更新了第二个Y轴步骤，取决于我用dinamically设置的布尔值，一切都完美无缺。不过，当我触发一个图例事件（点击其中一个图例）时，我想要更新第二个Y轴（重绘它）。我无法真正发挥作用：情节刷新，但我的第二个Y轴步骤不会改变。

这是我的绘画功能。我已经阅读了Chart.js文档，我发现了here，但我真的可以理解如何填充我的传奇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;
                        }
                    }
                }]
            }
        }
    });
}

答案

我找到了自己的方式。这里有一个代码片段，适用于遇到同样问题的人：

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