如何在PrimeNG横向柱状图X轴显示27-feb-23格式日期？

我使用PrimeNG结合Angular开发横向柱状图，现有代码中X轴的日期未按指定格式（如27-feb-23）展示，推测需要在ticks中添加标签格式配置，但不确定具体实现方式，希望了解PrimeNG柱状图的日期显示配置方法。

当前图表效果：

现有组件代码：

export class BarGraphComponent {
  basicData: any;

  basicOptions: any;

  chartOptions: any;

  horizontalOptions: any;

  constructor() {}

  ngOnInit() {
      this.basicData = {
          labels: ['Set Pre-Cast Girders-San Antonio OC-Stage 1 - Milestone', 'Pour Footing-6th OC-Bent 2-Stage 1 - Milestone', 'Setup MOT-Monte Vista UC-Stage 2B - Milestone', 'Open Campus Bridge For Traffic - Milestone', '  Place JPCP-Benson To Mountain (Sta 1093-1125)-Stage 2A WB (GP#3 & 4 & SH) - Milestone', 'Excavate Bench 5th-RW 1155 (SHGA) - Milestone', 'Form Superstructure Face-RW 1154 (Soldier Pile & GA) - Milestone'],
          datasets: [
              {
                  label: 'My First dataset',
                  backgroundColor: '#42A5F5',
                  data: [ new Date('2023, 2, 27'), new Date('2023, 2, 27'), new Date('2023, 3, 1'), new Date('2023, 3, 6'), new Date('2023, 3, 26'), new Date('2023, 4, 11'), new Date('2023, 4, 26')]
              }
          ]
      };

      this.horizontalOptions = {
          indexAxis: 'y',
          plugins: {
              legend: {
                  labels: {
                      color: '#495057'
                  }
              }
          },
          scales: {
              x: {
                  ticks: {
                      color: '#495057'
                  },
                  grid: {
                      color: '#ebedef'
                  }
              },
              y: {
                  ticks: {
                      color: '#495057'
                  },
                  grid: {
                      color: '#ebedef'
                  }
              }
          }
      };
  }
}

PrimeNG柱状图基于Chart.js实现，直接用Chart.js的时间轴配置即可实现自定义日期格式。需两步修改：指定X轴为时间类型，配置日期格式化规则。

修改后的horizontalOptions配置代码如下：

this.horizontalOptions = {
    indexAxis: 'y',
    plugins: {
        legend: {
            labels: {
                color: '#495057'
            }
        }
    },
    scales: {
        x: {
            type: 'time', // 声明X轴为时间轴类型
            time: {
                unit: 'day', // 按日维度展示数据
                displayFormats: {
                    day: 'dd-MMM-yy' // 设置日期格式，对应目标格式27-feb-23
                }
            },
            ticks: {
                color: '#495057',
                // 手动格式化回调，确保格式完全匹配需求
                callback: function(value: any) {
                    const date = new Date(value);
                    const day = date.getDate().toString().padStart(2, '0');
                    const monthNames = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
                    const month = monthNames[date.getMonth()];
                    const year = date.getFullYear().toString().slice(-2);
                    return `${day}-${month}-${year}`;
                }
            },
            grid: {
                color: '#ebedef'
            }
        },
        y: {
            ticks: {
                color: '#495057'
            },
            grid: {
                color: '#ebedef'
            }
        }
    }
};

关键说明： #

• type: 'time'：让Chart.js识别X轴数据为日期类型，是格式化的前提。
• time.displayFormats：通过预定义格式字符串快速设置日期样式，dd是两位日期，MMM是三位小写月份缩写，yy是两位年份。
• ticks.callback：手动格式化的兜底方案，避免某些场景下自动格式化失效，确保输出完全符合27-feb-23的格式。

注意事项： #

如果项目未安装Chart.js时间适配器，需额外安装依赖并导入，否则时间轴可能无法正常工作：

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

在Angular模块中导入适配器：

import 'chartjs-adapter-date-fns';

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