Reactjs 如何在react-chartjs-2 X轴中显示特定时间段的所有日期

我有一个图表，需要显示特定月份内的数据。例如，X轴应以今天结束。应该从一个月前开始。并且应该显示该时间段中的所有日期。现在，从那个月的第一天开始

预期结果。 截止日期-今日（五月五日） 开始日期-一个月前（4月4日） 但从4月1日开始

//code
import React, { Component } from 'react';
import moment from 'moment';
import { Line } from 'react-chartjs-2';

export default class LineChart extends Component {
  state = {
    starting: moment().subtract(1, 'month').format('MMM DD'),
    ending: moment().format('MMM DD'),
    data: [
      {
        x: new Date(),
        y: 1,
      },
      {
        t: new Date(),
        y: 10,
      },
    ],
  };
  render() {
    var startDate = moment().subtract(1, 'months').format('MMM DD');
    var endDate = moment().format('MMM DD');
    const data = {
      labels: [startDate, endDate],
      datasets: [
        {
          label: 'NPS Score',
          fill: false,
          lineTension: 0.2,
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderDash: [],
          borderDashOffset: 0.0,
          pointBorderColor: 'rgba(75,192,192,1)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(75,192,192,1)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: this.state.data,
        },
      ],
    };

    const lineOptions = {
      scales: {
        xAxes: [
          {
            type: 'time',
            time: {
              unit: 'day',
              tooltipFormat: 'lll',
            },
            ticks: {
              maxTicksLimit: 12,
            },
          },
        ],
        yAxes: [
          {
            stacked: true,
            gridLines: {
              display: false,
            },
            ticks: {
              suggestedMin: 100,
              suggestedMax: 0,
            },
          },
        ],
      },
      legend: {
        display: false,
      },
      tooltips: {
        enabled: true,
      },
    };
    return <Line data={data} options={lineOptions} height={120} />;
  }
}

//代码
从“React”导入React，{Component}；
从“力矩”中导入力矩；
从'react-chartjs-2'导入{Line}；
导出默认类折线图扩展组件{
状态={
开始：矩（）.减去（1，'月'）.格式（'MMM DD'），
结束：矩（）.format（'MMM DD'），
数据：[
{
x:新日期（），
y:1,，
},
{
t:新日期（），
y:10，
},
],
};
render（）{
var startDate=moment（）.减法（1，'月'）.格式（'MMM DD'）；
var endDate=moment（）.format（'MMM DD'）；
常数数据={
标签：[开始日期，结束日期]，
数据集：[
{
标签：“NPS分数”，
填充：假，
线张力：0.2，
背景颜色：“rgba（75192192,0.4）”，
边框颜色：“rgba（75192192,1）”，
borderDash:[]，
borderDashOffset:0.0，
pointBorderColor:'rgba（75192192,1）'，
pointBackgroundColor:“#fff”，
点边界宽度：1，
点半径：5，
pointHoverBackgroundColor:'rgba（75192192,1）'，
pointHoverBorderColor:'rgba（2201,1）'，
pointHoverBorderWidth:2，
点半径：1，
点半径：10，
数据：this.state.data，
},
],
};
常量行选项={
比例：{
xAxes：[
{
键入：“时间”，
时间：{
单位：'天'，
tooltipFormat:'lll'，
},
滴答声：{
马克斯：12，
},
},
],
雅克斯：[
{
对,，
网格线：{
显示：假，
},
滴答声：{
建议民:100,，
建议最大值：0，
},
},
],
},
图例：{
显示：假，
},
工具提示：{
启用：对，
},
};
返回；
}
}

这是我在堆栈闪电战中的代码-

---

有人能帮我吗？提前感谢。

您必须使用正确的格式。这是经过编辑的代码

var startDate = moment().subtract(1, 'months').format('YYYY-MM-DD');
var endDate = moment().format('YYYY-MM-DD');

const data = {
   labels: [startDate, endDate],
   //rest of the code
}

---

请注意，图表js同时显示了月份和日期。例如，“5月6日”

基于moment.js的解决方案是严格要求还是简单的js就可以了？@YevgenGorbunkov moment.js不是严格要求。简单的JS是好的：）看起来，你有一个打字错误，如果你一直是after@YevgenGorbunkov不，它起作用了，对吗？我可以在Chrome上运行它。我将用代码更新问题