Angular中Chart.js折线图X轴日期均匀显示问题求助

我在Angular项目中使用Chart.js绘制折线图，X轴需要展示从API获取的动态日期。尝试设置type:'linear'后仍无法实现X轴日期均匀显示，附上相关代码及当前X轴日期不均匀的截图，寻求解决方案。

相关代码 #

component.html #

<canvas id="myChart"></canvas>

（注：原代码中</chart>为笔误，应为</canvas>）

component.ts #

ngOnInit(){
  this.chart = document.getElementById('myChart')
  this.loadchart();
}

loadchart(){
  new Chart(this.chart, {
    type: 'line',
    data: {
        datasets: [{
            data: this.carArray,
            label: 'No. of car',
            backgroundColor: 'rgba(255, 99, 132, 1)',
            fill:true
        },
        {
          data: this.priceArray,
          label: 'price',
          backgroundColor: 'rgba(255, 99, 132, 1)',
          fill:true
        }],
        labels: this.dateArray,
    },
    options: {
       elements:{
         point: {
           radius:1
         },
       },
       plugins: {
         legend: {
           display:true
         }
       },
       responsive: true,
       scales: {
         y: {
           grid: {
             borderDash:[1,2],
           },
           brginAtZero: true // 拼写错误：应为beginAtZero
         },
         x: {
           ticks:{
             color: 'blue'
           },
          grid: {
            tickColor: 'red',
            borderDash:[1,2],
          },
          brginAtZero: true // 拼写错误：应为beginAtZero
        }
       }
    }
  })
}

解决方案 #

要实现X轴日期均匀显示，核心是把X轴配置为时间轴而非线性轴，具体步骤如下：

1. 安装时间适配器
   Chart.js v3+ 不再内置时间解析功能，需安装对应的日期适配器，例如date-fns适配器：

npm install chartjs-adapter-date-fns date-fns

2. 导入适配器
   在component.ts顶部导入适配器：

import 'chartjs-adapter-date-fns';

3. 修改X轴配置
   将scales.x的type设置为'time'，并配置时间显示规则，替换原有X轴配置：

scales: {
  y: {
    grid: {
      borderDash:[1,2],
    },
    beginAtZero: true // 修正拼写错误
  },
  x: {
    type: 'time', // 设置为时间轴
    time: {
      unit: 'day', // 根据数据粒度调整，如hour/month
      displayFormats: {
        day: 'yyyy-MM-dd' // 自定义日期显示格式
      },
      tooltipFormat: 'yyyy-MM-dd' // 鼠标悬浮时的日期格式
    },
    ticks:{
      color: 'blue',
      autoSkip: true, // 自动跳过密集刻度避免重叠
      maxRotation: 45,
      minRotation: 45
    },
    grid: {
      tickColor: 'red',
      borderDash:[1,2],
    },
    beginAtZero: false // 时间轴无需从0开始
  }
}

4. 确保日期数据格式正确
   dateArray中的元素必须是可被解析的日期字符串（如'2024-05-01'）或Date对象，不能是模糊文本格式（如'May 1'）。

5. 修正代码拼写错误
   原代码中brginAtZero为拼写错误，需改为beginAtZero，否则配置无法生效。

完成以上配置后，Chart.js会自动根据时间间隔均匀分配X轴刻度，解决日期显示不均匀的问题。

内容的提问来源于stack exchange，提问作者neelam