Html Chart.js时间序列

仅作为前言，我对代码非常陌生！我正在使用Chart.js显示营销活动产生的招聘候选人数量。我试图显示每周生成的数据。所以我会有一个开始日期，x轴将在下周显示。现在，我只能每天把它展示出来。再说一次，我还不太熟悉这个话题，所以如果我没有正确解释，我道歉。在本例中，x轴将位于2020/11/20、2020/12/07、2020/12/14，依此类推。谢谢

Chart.defaults.global.defaultFontFamily='Poppins'；
const ctx=document.getElementById（'timeSeriesChart'）.getContext（'2d'）；
const startDate=新日期（2020年10月30日）；
常量标签=[]；
for（设i=0；i<13；i++）{
const date=时刻（startDate）。添加（i，'days'）。格式（'YYYY/MM/DD'）；
labels.push（date.toString（））；
}
常量图表=新图表（ctx{
键入：“行”，
数据：{
标签，
数据集：[{
标签：“招聘候选人”，
数据：[4,5,6,90,56,32,14,6,72,99]，
边框宽度：1
}]
},
选项：{}
});

欢迎来到编码世界。别介意问问题——这很专业，我们都是从一天开始的：-）

我希望我正确理解您的需求，并立即提供最新版本的解决方案：

Chart.jsv3.xx（与v2.xx不兼容）

时间序列轴（带有moment.js+适配器）：

资料来源：

//获取图表的最新版本，现在是v3.2.1
//timeseries需要此适配器才能使用momentjs
Chart.defaults.font.family='Poppins'；
//注意，它不再像v2.xx中那样是Chart.defaults.global.defaultFontFamily
const ctx=document.getElementById（'timeSeriesChart'）.getContext（'2d'）；
const startDate=新日期（2020年10月30日）；
常量标签=[]；
设i=0；
//提示：为（）循环声明变量'i`outside'-性能更好
让日期=新日期（）；
//另外：为（）循环声明变量'date`outside`
对于（i；i<13；i++）{
日期=时刻（起始日期）。添加（i，'周'）。格式（'YYYY/MM/DD'）；
//如果您有每周总计，请添加“周”而不是“天”
//如果您有每日总计，请添加“天”
labels.push（date.toString（））；
}
常量图表=新图表（ctx{
键入：“行”，
数据：{
标签，
数据集：[{
标签：“招聘候选人”，
数据：[4,5,6,90,56,32,14,6,72,99]，
边框宽度：1，
张力：0.3，
填充：正确
}]
},
选项：{
scales:{//注意这里-v3.xx中的新语法
x:{
键入：“timeseries”，
时间：{
单位：'周'，//这就成功了：-）
等工作日：是的，
//宣布星期一为一周的第一天
//因为在某些地方，星期天是一周的第一天
}
}
}
}
});

您应该得到以下结果：

希望这有助于和快乐的编码

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>

<canvas id="timeSeriesChart"></canvas>
<script>
Chart.defaults.global.defaultFontFamily = 'Poppins';
const ctx = document.getElementById('timeSeriesChart').getContext('2d');

const startDate = new Date(2020, 10, 30);
const labels = [];
for (let i = 0; i < 13; i++) {
  const date = moment(startDate).add(i, 'days').format('YYYY/MM/DD');
  
  labels.push(date.toString());
}

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels,
    datasets: [{
      label: 'Recruitment Candidates',
      data: [4, 5, 6, 90, 56, 32, 14, 6, 72, 99],
      borderWidth: 1
    }]
  },
  options: {}
});

</script>