Javascript chartjs-react数据未到达x轴的末端

我正在使用图表js显示希腊给定日期范围内每天的新冠病毒疫苗接种总数。问题是，虽然我的总数是正确的，但折线图并没有在最后一天完成，而是更快。我认为这是一个css问题，因为我已经测试了我的数据，它是正确的

12月28日开始，5月3日结束。ap 18的结果是5月3日的结果

我的代码：

   //function that returns the range of dates on the x-axis 
    const getDaysRangeArray = (start,end) =>{
      
      let dateArr = [];
    
      for(let dt=new Date(start); dt<=end; dt.setDate(dt.getDate()+1)){
      dateArr.push(new Date(dt));
      }
    
      return dateArr;
    }




    const Chart = (props) => {
 
  let daylist = getDaysRangeArray(new Date((props.from).toLocaleDateString('en-US')), new Date((props.to).toLocaleDateString('en-US')));

  function getTotalVaccinations(data){   
    let sum= data.reduce((acc,itm)=>{
      if(itm.totalvaccinations!=="undefined"){
        return acc + itm.totalvaccinations;
      }
    },0);
    
    return sum;
  }

  return (
    <div className="flex items-center place-items-center  w-full mx-auto">
      {(props.covidData).length>0 
         && 
        <Line
        type = "line"
        data={{
          //the date range 
          labels:[...daylist.map(d=>d.toDateString().slice(4,10))],
        datasets: [
            {
              label: 'total vaccinations',
              //the total vaccinations array for each date of given range 
              data:[...props.covidData.map((d:any)=>getTotalVaccinations(d)).sort((a:any,b:any)=>{
                  return a-b 
              })],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
              
              ],
              borderColor: [
                'rgba(255, 99, 132, 1)',
             
              ],
              borderWidth: 1,
              pointRadius: 0,
            },
          ],
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
            xAxes: [{
              type: 'time',
              time: {
                displayFormats: {
                  'millisecond': 'MMM DD',
                  'second': 'MMM DD',
                  'minute': 'MMM DD',
                  'hour': 'MMM DD',
                  'day': 'MMM DD',
                  'week': 'MMM DD',
                  'month': 'MMM DD',
                  'quarter': 'MMM DD',
                  'year': 'MMM DD',
                }
              }
            }],
          },
          legend: {
            labels: {
              fontSize: 35,
            },
          },
        }}
      />
    
    }

   </div>    

  )
}

export default Chart;

//返回x轴上日期范围的函数
常量getDaysRangeArray=（开始、结束）=>{
设dateArr=[]；
对于（设dt=新日期（开始）；dt{
让daylist=getDaysRangeArray（新日期（（props.from）.toLocaleDateString（'en-US'）），新日期（（props.to）.toLocaleDateString（'en-US'））；
函数getTotalVaccinations（数据）{
让总和=数据。减少（（acc，itm）=>{
如果（itm.疫苗接种总数！=“未定义”）{
返回acc+itm.Total疫苗接种；
}
},0);
回报金额；
}
返回(
{（props.covidData）.length>0
&& 
d、 toDateString（）.slice（4,10））]，
数据集：[
{
标签：“疫苗接种总数”，
//给定范围内每个日期的疫苗接种总数数组
数据：[…props.covidData.map（（d:any）=>getTotalVaccinations（d））.sort（（a:any，b:any）=>{
返回a-b
})],
背景颜色：[
"rgba(255,99,132,0.2)",，
],
边框颜色：[
"rgba(255,99,132,1)",，
],
边框宽度：1，
点半径：0，
},
],
}}
高度={400}
宽度={600}
选择权={{
MaintaintAspectRatio:false，
比例：{
雅克斯：[
{
滴答声：{
贝吉纳泽罗：是的，
},
},
],
xAxes：[{
键入：“时间”，
时间：{
显示格式：{
'毫秒'：'MMM DD'，
“第二个”：“嗯，DD”，
“分钟”：“嗯，DD”，
“hour”：“MMM DD”，
“day”：“MMM DD”，
“周”：“嗯，DD”，
“月”：“月日”，
“季度”：“月日”，
“年”：“月日”，
}
}
}],
},
图例：{
标签：{
尺码：35，
},
},
}}
/>
}
)
}
导出默认图表；

如果我缩小日期范围，数据将正确显示，并将其设置为最后一个日期（3月2日-3月5日）

---

非常感谢您的帮助。

Chart.js将数据与标签匹配，因此您是否确定您的数据数组与标签数组的长度相同，因为您的标签数组似乎包含更多项作为数据array@LeeLenalee我会检查这个更多，但我有90%的把握。如果您看到第二幅图像，那么长度是正确的，所以这里的数据数组的长度与标签数组的长度相同，只是为了排除其他因素。。。您是否将数据放在简单的chart.js示例中以查看其是否正常工作？@gaitat我的数据是从外部api获取的