javascript 在react-apexcharts中自定义x轴标签

acruukt9  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(147)

我使用react-apexcharts。我有一年的每日财务数据,但我想在x轴上显示月份名称。

xaxis: {

   labels: {
       show: true,
       formatter: function (val: any) {
          return dayjs(val).format("MMM");
       }
   }
}

这个代码在x轴上显示所有月份。
如何在图表的x轴上显示月份名称?
该图像已给出下面:

h5qlskok

h5qlskok1#

要在图表的x轴上显示月份名称,你必须像这样修改你的格式化函数

const options = {
    xaxis: {
      labels: {
        show: true,
        formatter: function (val) {
          const months = [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
          ];
          const index = months.indexOf(val);
          // Return month name for alternate months
          return index % 2 === 0 ? val : '';
        }
      }
    }
  };

希望有帮助!

相关问题