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

Question

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

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

Answer 1

我做到了！我在我的日期选择器上创建了一个在每次日期更改后调用的函数，就像这样：

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

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

How to display specific data range on my chart's dataset using Zoom and Pan on Chart.js 3.+?

javascript

jquery

chart.js3

chart.jsv3