Angular中Highcharts公历或时间戳日期转波斯日期的实现方法

前置准备 #

首先安装jalali-moment依赖：
npm install jalali-moment --save

实现步骤 #

在使用Highcharts的组件中按如下逻辑修改即可：

1. 导入依赖

import * as Highcharts from 'highcharts';
import * as moment from 'jalali-moment';

2. 自定义x轴日期标签格式
   在xAxis.labels配置中新增formatter函数，将默认时间戳转换为波斯日期格式即可。如果需要全局生效，也可以通过Highcharts.dateFormats注册自定义日期格式符。

修改后的完整配置代码 #

// 可选：全局注册波斯日期格式符，方便后续多处使用
Highcharts.dateFormats = {
  J: function (timestamp) {
    return moment(timestamp).locale('fa').format('YYYY/MM/DD')
  }
}

Highcharts.chart('lineChart', {
  chart: {
    scrollablePlotArea: {}
  },
  xAxis: {
    type: 'datetime',
    gridLineWidth: 1,
    labels: {
      align: 'left',
      x: 3,
      y: -3,
      // 自定义日期显示格式
      formatter: function() {
        // 直接转换为你需要的波斯日期格式，可自定义format参数
        return moment(this.value).locale('fa').format('YYYY/MM/DD')
        // 如果注册了全局格式符也可以直接用：return Highcharts.dateFormat('%J', this.value)
      }
    }
  },
  // 可选：修改提示框的日期显示为波斯格式
  tooltip: {
    xDateFormat: '%J', // 用全局注册的格式符，或者自定义formatter
  },
  yAxis: [{
    title: {
      text: null
    },
    showFirstLabel: false
  }],
  series: [{
    type: 'line',
    data: [
      [1633209533000, 3],
      [1635796087000, 3],
      [1635882487000, 6],
      [1636055287000, 4],
      [1638466033000, 8],
      [1638479933000, 6]
    ]
  }]
});

格式自定义说明 #

你可以根据需求修改moment的format参数实现不同的显示效果：

• 仅显示年月日：format('YYYY/MM/DD')
• 带时分：format('YYYY/MM/DD HH:mm')
• 显示波斯语月份名称：format('YYYY MMMM DD')

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