解决Chart.js+Angular+ng2-charts用日期作x值报TS2322类型错误问题

1. 安装并导入时间轴适配器 #

Chart.js的time类型刻度依赖独立的日期处理适配器，你已经引入了moment，直接安装对应适配器即可：

npm install chartjs-adapter-moment

安装完成后在组件代码顶部导入适配器：

import 'chartjs-adapter-moment';

2. 修正数据集的TypeScript类型声明 #

默认的ChartConfiguration['data']类型推导默认数据集为数值数组，你需要手动指定数据结构为带x/y属性的对象类型，覆盖默认类型校验：

// 先定义时间类型数据点的结构
interface ChartTimeDataPoint {
  x: string | Date | number;
  y: number;
}

// 声明lineChartData时指定泛型
public lineChartData: ChartConfiguration<'line', ChartTimeDataPoint[]>['data'] = {
  datasets: [
    {
      data: [
        {x: '2021', y: 12},
        // 其余数据项可按相同结构添加
      ],
      label: 'FBSV',
    }
  ],
  // 留空即可，x轴标签会从数据的x字段自动读取
  labels: []
};

3. 可选：日期格式标准化（推荐） #

为了避免不同浏览器的日期解析差异，建议把x值统一转为Date类型，比如用moment处理：

data: [
  {x: moment('2021', 'YYYY').toDate(), y: 12},
  {x: moment('2022', 'YYYY').toDate(), y: 25},
]

修改完成后即可正常使用日期作为x轴值，原有TS类型错误会自动消失，html部分代码无需改动。

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