无法放大 Chart.js

Question

I created some chart in MVC with chart.js without issue Now I want to implement zoom in a Line chart following this example

In my layout page I added:

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.7/hammer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7/dist/chartjs-plugin-zoom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

My JS function is like:

function ShowStepEventsChart(selectedFeatureId, targetID) {


    var title = $("#myChart_" + event.target.id).data("title");
    var xLabel = $("#myChart_" + event.target.id).data("xlabel");
    var yLabel = $("#myChart_" + event.target.id).data("ylabel");
    var ctx = $("#myChart_" + event.target.id).get(0).getContext("2d");


    // Used here in order to be able to insert dataset later on.
    var data = {
        labels: null
    };
    var myNewChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            title: { display: false, text: title },
            legend: { position: 'top' },
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'x'
                    },
                    zoom: {
                        enabled: true,
                        mode: 'x'
                    }
                }
            },

            scales:
            {
                xAxes: [{
                    gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: xLabel }, /*ticks: { beginAtZero: true, stepSize: 1  }*/
                    ticks: {
                        callback: function (value, index, values) {
                            return parseFloat(value).toFixed(0);
                        },
                        autoSkip: true,
                        maxTicksLimit: 20,
                        stepSize: 1
                    }
                }],
                yAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: yLabel }, ticks: { beginAtZero: true/*, stepSize: 50 */ } }]
            }
        }
    });

    $('.measurementsID').each(function (i, obj) {
        var measID = $(this).html();

        var startPoint = parseFloat($("#feature_StartPoint_" + measID).data("StartPoint")).toFixed(2) * sensorsFrequency;
        var endPoint = parseFloat($("#feature_EndPoint_" + measID).data("EndPoint")).toFixed(2) * sensorsFrequency;
        
        $.ajax({
            url: '/API/GetFeature?measurementId=' + measID + '&featureId=' + selectedFeatureId,
            type: 'POST',
            dataType: 'json',
            success: function (reply) {
                // Loop through limbs:
                for (var a = 0; a < myLimbLabels.length; a++) {
                    try {
                        var myData = $(reply.data[name = myLimbLabels[a]].x).slice(startPoint, endPoint);
                        
                        var myDataset = {
                            label: myLimbLabels[a],
                            fill: false,
                            borderColor: myLimbColors[a],
                            borderWidth: 1,
                            pointRadius: 0,
                            data: myData
                        }
                        data.datasets.push(myDataset);
                    } catch (error) {
                        $(targetID + " > .card > .PanelBody").html($(targetID + " > .card > .PanelBody").html() + labelList[a] + ": Invalid values for measurement " + measID + "<br />");
                    }
                }

                // TimeSpan
                try {
                    var timeSpan = $(reply.data.timeStamps.timeStamps).slice(startPoint, endPoint);
                    var firstSpan = timeSpan[0];
                    for (var j = 0; j < timeSpan.length; j++) {
                        timeSpan[j] = (timeSpan[j] - firstSpan) / sensorsFrequency;
                    }
                    data.labels = timeSpan;

                } catch (error) {
                    $(targetID + " > .card > .PanelBody").html($(targetID + " > .card > .PanelBody").html() + "Invalid values for measurement " + measID + "<br />");
                }

                myNewChart.update();
                i += 1;
            },
            statusCode: {
                404: function (content) { addErrorMessage('Cannot find resource.'); },
                500: function (content) { addErrorMessage('Internal server error'); }
            },
            error: function (req, status, errorObj) {
                // handle status === "timeout"
                // handle other errors
                addErrorMessage('Unknown error' + errorObj);
            }
        });
    });
}`

I get the error mesage:

Uncaught TypeError: n.indexOf is not a function at n.determineDataLimits (Chart.min.js:7)

It seems it's because update the graph after it has been generated, but it's what I need.

How can I fix it ?

Answer 1

I fixed my issue when I chaged the way to display the labels. I replace the insertion from

for (var j = 0; j < timeSpan.length; j++) {
    timeSpan[j] = j / sensorsFrequency;
}
data.labels = timeSpan;

to:

for (var j = 0; j < timeSpan.length; j++) {
     timeSpan[j] = j;
}
data.labels = timeSpan;

Then in the config I replace:

callback: function (value, index, values) {
    return parseFloat(value).toFixed(0);
},
autoSkip: true,

By:

userCallback: function (item, index) {
    if ((index) % sensorsFrequency === 0)
         return item / sensorsFrequency;
},
autoSkip: false,

Not sure why but it works for me.