javascript - 如何使用 Chart.js 3.+ 上的缩放和平移在我的图表数据集上显示特定数据范围？

Question

我有一个关于 x 天/月发送的消息的折线图，我还有两个日期选择器。我希望能够选择开始日期、结束日期，并且图表会读取这些日期并显示这个精确的点范围。我已经在我的 chart.js 文件上配置了缩放和平移，我可以手动完成，但我想知道如何通过我刚才描述的内容来做到这一点。

在这张照片上，我已经有 3 个月的数据了。它总是开始显示 1 个月。

Answer 1

我做的！我创建了一个函数，以便在我的 datepicker 上的每个日期更改后调用，如下所示：

function filterDate(initialDate, finalDate){
    //first I cloned my dataset [labels (x) and data (y)] like this:
    labelsData2 = [...labelsData];
    sentData2 = [...sentData];

    //then I used the datepicker's values to pinpoint the index of both dates (initial and final) on my labelsData2 array, sliced the array so it now contains only the range of dates that I want and stored the value on labelsData2 again
    labelsData2 = labelsData2.slice(labelsData2.indexOf(initialDate), mesesData2.indexOf(finalDate) + 1); //<- +1 to prevent the index 0 to mess my result.

    //I used the same indexOf to slice my sentData2 array as well, since they have the same length.
    sentData2 = sentData2.slice(labelsData2.indexOf(initialDate), mesesData2.indexOf(finalDate) + 1);

    //then I updated my chart!
    myChart.data.datasets[0].data = sentData2;
    myChart.data.labels = labelsData2;
    myChart.update();
}