在反应 apexchart 中显示 Persian/Jalali 日期

Question

你能指导我如何制作一个“日期时间 X 轴”图表 反应 Apexchart.js 当我日期是波斯语？最后，我应该用 Datetime X-Axis 制作一个“brushChart”，如果您有类似的项目可以帮助我，请发送 link of them

我在下面有这些代码，我尝试将“defaultLocale”和“name”与“Per”和“Fa”一起使用，但 none 它们工作正常并出现错误，应用程序崩溃了。

chart: {
  id: 'reactchart-example',
  defaultLocale: 'Fa',
  locales: [
    {
      name: 'per',
      options: {
        months: [
          'دی',
          'بهمن',
          'اسفند',
          'فروردین',
          'اردیبهشت',
          'خرداد',
          'تیر',
          'مرداد',
          'شهریور',
          'مهر',
          'آبان',
          'آذر',
        ],
        shortMonths: ['دی', 'بهم', 'اسف', 'فرو', 'ارد', 'خرد', 'تیر', 'مرد', 'شهر', 'مهر', 'آبا', 'آذر'],
        days: ['یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنج شنبه', 'جمعه', 'شنبه'],
        shortDays: ['یک', 'دو', 'سه', 'چهار', 'پنج', 'جمع', 'شنب'],
        toolbar: {
          download: 'دانلود SVG',
          selection: 'انتخاب',
          selectionZoom: 'انتخاب بزرگنمایی',
          zoomIn: 'بزرگنمایی',
          zoomOut: 'کوچک نمایی',
          pan: 'جابجایی',
          reset: 'بازگرداندن',
        },
      },
    },
  ],
},

感谢您的帮助

Answer 1

您不需要在图表对象中添加整个配置，您的 node_modules 文件夹中此地址中的每个区域设置都有一个 json 文件： "apexcharts/dist/locales/"

您只需在您的代码中导入所需的语言环境 json 文件，如下所示

import fa from "apexcharts/dist/locales/fa.json"

然后简单地在对象“chart”中设置 "locales" 数组和 "defaultLocale" 如下所示：

chart: {
  //The following two lines are the key answer
  locales: [fa], //or multi language like [fa, en]
  defaultLocale: 'fa',
  
  //your other configs ...
},

在反应 apexchart 中显示 Persian/Jalali 日期

Displaying Persian/Jalali dates in react apexchart

javascript

reactjs

persian-calendar

apexcharts