ChartJS -为什么第一个数据集上的转换不好？

我用react-datepicker来选择数据的日期，返回的数据如下所示：

{clicks: 6, date: "2022-05-15", link: "instagram"},
{clicks: 5, date: "2022-05-15", link: "google"}...

在datePicker中加载和每次更改时，我使用此函数设置数据变量，date将为moment（）：

const onChangeClick = (dates: any) => {
const [start, end] = dates;
setStartDateClick(start);
setEndDateClick(end);

if (start & end) {
  let dates = {
    dateFrom: moment(start).format('YYYY-MM-DD'),
    dateTo: moment(end).format("YYYY-MM-DD")
  }
  _statisticsService.getClickStats(dates).then((response: any) => {
    response.data.map((e: any) => {
      clicksData[e?.link].push(e)
    })

    setInstaDataClick(clicksData['instagram'].map((e: any) => {
      return { clicks: e.clicks, date: moment(e.date) }
    }))
    setFacebookDataClick(clicksData['facebook'].map((e: any) => {
      return { clicks: e.clicks, date: moment(e.date) }
    }))
    setGoogleDataClick(clicksData['google'].map((e: any) => {
      return { clicks: e.clicks, date: moment(e.date) }
    }))
    setTripadvisorDataClick(clicksData['tripadvisor'].map((e: any) => {
      return { clicks: e.clicks, date: moment(e.date) }
    }))
    setWebsiteDataClick(clicksData['website'].map((e: any) => {
      return { clicks: e.clicks, date: moment(e.date) }
    }))
  })
  setLabelsClick(getDaysArray(clicksData[0]?.date, clicksData[clicksData.length - 1].date))

}

};

稍后我会在数据集中使用这些值：

const data = {
labels: labelsClick,
datasets: [
  {
    label: 'Instagram',
    data: instaDataClick,
    borderColor: '#c32aa3',
    backgroundColor: '#c32aa3',
  },
  {
    label: 'Facebook',
    data: facebookDataClick,
    borderColor: '#1877f2',
    backgroundColor: '#1877f2',
  },
  {
    label: 'Google',
    data: googleDataClick,
    borderColor: '#ea4335',
    backgroundColor: '#ea4335',
  },
  {
    label: 'Tripadvisor',
    data: tripadvisorDataClick,
    borderColor: '#34e0a1',
    backgroundColor: '#34e0a1',
  },
  {
    label: 'Website',
    data: websiteDataClick,
    borderColor: '#010101',
    backgroundColor: '#010101',

  },
],
};

最后，这是我预览折线图的方式

<div className='datepicker-container'>
          <DatePicker
            onChange={onChangeClick}
            startDate={startDateClick}
            endDate={endDateClick}
            selectsRange
            placeholderText='Select Date'
            isClearable
          />
 </div>

 <div className='chart'>
          <Line options={options} data={data} />
 </div>

该行的选项如下所示，x轴是日期，y轴是点击次数：

const options: ChartOptions<'line'> = {
responsive: true,
scales: {
  y: {
    title: {
      display: true,
      text: 'Date'
    },
    ticks: {
      precision: 0,
    }
  },
  x: {
    type: 'time',
    title: {
      display: true,
      text: "Date"
    },
    time: {
      unit: 'day',
      stepSize: 1,
      displayFormats: {
        day: "MMM DD"
      }
    }
  },
},
parsing: {
  xAxisKey: 'date',
  yAxisKey: 'clicks',
},
plugins: {
  legend: {
    position: 'top',
  },
  title: {
    display: true,
    text: 'Click statistics',
  },
},
};

现在问题是：
在第一次加载时，数据集中的第一行（在本例中为Instagram）如下所示：

instagram系列有不同的动画，可能是什么问题？
[edit]：更改选项中的动画不会影响Instagram的行，它仍然会从左边来，根据动画的不同，它会慢一点或快一点，但总是从左边来。

对于任何人谁有同样的问题在未来，这里是解决方案：
我的代码的问题是instaDataClick变量的第一个状态是一个空数组，它应该有一个date属性，因为x轴是日期。
所以变量应该看起来像这样：

const initialStartDate = new Date(moment().subtract(10, 'd').format('YYYY-MM-DD'))
const initialEndDate = new Date(moment().format('YYYY-MM-DD'))

 const [instaDataClick, setInstaDataClick] = useState(
getDaysArray(initialStartDate.toString(), initialEndDate.toString()).map((e)=>{
  return {clicks: null, date: e}
})
)

函数getDaysArray：

const getDaysArray = function (start: any, end: any) {
for (var arr = [], dt = new Date(start); dt <= new Date(end); dt.setDate(dt.getDate() + 1)) {
  arr.push(new Date(dt).toString().substr(4, 6));
}
return arr;
};

通过这样做，我们设定了线条的初始位置。

ChartJS -为什么第一个数据集上的转换不好？

1条答案

相关问题

热门标签

最新问答