html - Chart.js 时间序列

Question

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

到目前为止我所拥有的

<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>

标签： htmlchart.js

Answer 1

欢迎来到编码的世界。没关系问问题 - 这是专业的，我们都从一天开始:-)

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

Chart.js v3.xx （与v2.xx不兼容）

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

资料来源：https ://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   //gets you the latest version of chart, now v3.2.1

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
   //you need this adapter for timeseries to work with momentjs 

<div>
  <canvas id="timeSeriesChart"></canvas>
</div>

<script>
Chart.defaults.font.family = 'Poppins';
   // watch out, it's not Chart.defaults.global.defaultFontFamily anymore as in v2.xx

const ctx = document.getElementById('timeSeriesChart').getContext('2d');

const startDate = new Date(2020, 10, 30);
const labels = [];

let i = 0;
   //tip: declare variable `i` outside `for ()` loop - better performance
let date = new Date();
   //also: declare variable `date` outside `for ()` loop

for (i; i < 13; i++) {
  date = moment(startDate).add(i, 'weeks').format('YYYY/MM/DD');  
    //add `weeks` instead of `days` if you have weekly totals
    //add `days` if you have daily totals

  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,
      tension: 0.3,
      fill: true
    }]
  },
  options: {
    scales: {   //watch out here - new syntax in v3.xx
      x: {
        type: 'timeseries',
        time: {
            unit: 'week',  //this does the trick :-)
            isoWeekday: true,
                // declare Monday as the first day of the week
                // because in some locale, sunday would be first day of week
        }
      }
    }
  }
});

</script>

你应该得到以下结果：

希望这对编码有所帮助和快乐...