当 y 轴中的数据数量不等于 x 轴中的数据数量时,在 Chartjs 2 中绘制折线图

plot line graph in Chartjs 2 when number of data in yaxis is not eqaul to number of data in xaxis

我有两个数组用于绘制图表。举个例子吧。

yAxis = [2, 4, 6, 7, 8, 9]
xAxis = [10:10, 10:20, 10:30, 10:40, 10:50, 11:00]

在这种情况下,图表将正确绘制。 然后在我的页面中单击某个按钮 'A' 后,xAxis 被修改为

xAxis = [10:10, 10:15, 10:20, 10:25, 10:30, 10:35, 10:40, 10:45, 10:50, 10:55, 11:00]

但我的 yAxis 将始终与

相同
yAxis = [2, 4, 6, 7, 8, 9]

在这种情况下,图表将在 xAxis 中绘制到“10:35” 然后在我的页面中单击某个按钮 'B' 后,xAxis 被修改为

xAxis = [10:10, 10:40, 11:00]

但我的 yAxis 将始终与

相同
yAxis = [2, 4, 6, 7, 8, 9]

在这种情况下,图表将在 y 轴上绘制到“6”

他们有办法解决这个问题吗? 我试图用 react-chartjs-2

在 reactjs 应用程序中实现

***或者如果开始时间、结束时间和要求的时间间隔被传递给图表,他们是否有任何方法在 xAxis 中分割时间 ***

此问题已通过添加应该介于两者之间的时间并更改图表中绘制的所有现有线条并添加 snapGap:true.

来解决