如何在React ApexCharts中使用波斯日期创建Datetime X轴brushChart

你程序崩溃的核心原因是defaultLocale取值和自定义locale的name字段不匹配：配置中自定义locale的name为per，但defaultLocale填写的是Fa，ApexCharts找不到对应语言配置就会触发报错。

将两个字段取值统一即可解决崩溃问题，修正后的基础配置如下：

chart: {
  id: 'reactchart-example',
  defaultLocale: 'fa', // 和自定义locale的name保持完全一致
  locales: [
    {
      name: 'fa', // 统一命名为fa，和defaultLocale匹配
      options: {
        months: [
          'دی',
          'بهمن',
          'اسفند',
          'فروردین',
          'اردیبهشت',
          'خرداد',
          'تیر',
          'مرداد',
          'شهریور',
          'مهر',
          'آبان',
          'آذر',
        ],
        shortMonths: ['دی', 'بهم', 'اسف', 'فرو', 'ارد', 'خرد', 'تیر', 'مرد', 'شهر', 'مهر', 'آبا', 'آذر'],
        days: ['یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنج شنبه', 'جمعه', 'شنبه'],
        shortDays: ['یک', 'دو', 'سه', 'چهار', 'پنج', 'جمع', 'شنب'],
        toolbar: {
          download: 'دانلود SVG',
          selection: 'انتخاب',
          selectionZoom: 'انتخاب بزرگنمایی',
          zoomIn: 'بزرگنمایی',
          zoomOut: 'کوچک نمایی',
          pan: 'جابجایی',
          reset: 'بازگرداندن',
        },
      },
    },
  ],
},

仅修改语言配置只能替换内置的月份、星期文本，不会自动将公历日期转换为波斯历，需要额外做以下配置：

• 安装jalaali-js库完成公历与波斯历的日期转换
• 在X轴配置中自定义日期格式化函数，将传入的时间戳转换为波斯日期格式

X轴配置示例：

import jalaali from 'jalaali-js'

xaxis: {
  type: 'datetime',
  labels: {
    formatter: (timestamp) => {
      const date = new Date(timestamp)
      // 公历转波斯历
      const persianDate = jalaali.toJalaali(date.getFullYear(), date.getMonth() + 1, date.getDate())
      // 自定义返回格式，示例为 年/月/日
      return `${persianDate.jy}/${String(persianDate.jm).padStart(2, '0')}/${String(persianDate.jd).padStart(2, '0')}`
    }
  }
}

BrushChart需要拆分两个ApexCharts组件，分别作为主展示图表和滑动选择的brush图表，核心配置逻辑如下：

• 两个图表共用同一份时间数据源，确保时间范围对齐
• brush图表的chart.brush.target字段填写主图表的id，实现两个图表的联动
• 两个图表的X轴都配置相同的波斯日期格式化逻辑，避免显示不一致

brush图表的核心配置示例：

chart: {
  id: 'brush-chart',
  brush: {
    enabled: true,
    target: 'reactchart-example' // 和主图表的id保持一致
  },
  selection: {
    enabled: true,
    xaxis: {
      min: 初始选择范围的最小时间戳,
      max: 初始选择范围的最大时间戳
    }
  }
}

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