如何将 ApexCharts 中的 x 轴动态更改为日期？

Question

如何将 x 轴的最大值动态更改为今天的日期？以及 15 周前的最小值？如何更改 x 轴以动态执行此操作？

chart:{
    animations:{
        enabled: false,
    },
    toolbar: {
        show: false,
    },
    height:450,
    width: '100%',
    type: 'bar',
    background:'#ffffff',
    forColor: '#333'
},
series:[{
    name:'Calories',
    data:[80,81,83,85,82,89,90]
        }],
dataLabels:{
    enabled:false
},
markers: {
    size:0,
},
xaxis:{
    type: 'datetime',
      categories: [
         sevenWeeksBack,date
      ],
    // datetimeUTC:true,
    // datetimeFormatter:{
    //     year: 'yyyy',
    //     month:"Mmm",
    //     day: "dd"
    // },
    //   labels:{
    //       show:true,
    //   },
    //min: new Date(sevenWeeksBack).getTime(),
     //max: new Date().getTime(),
     //range: new Date(sevenWeeksBack).getTime(),
    // min:new Date(Date.now()-604800000),
     // tickAmount: 'dataPoints' 
},
yaxis:[{
        title:{
            text: ''
        }
}],
plotOptions:{
    bar:{
    horizontal: false
    }
},
fill:{
    colors: ['#33e400']
},
title:{
    text: 'Food Calories',
    align: 'left',
    margin: 20,
    offsetY: 20,
    style:{
        fontSize: '25px'
    }
},
tooltip: {
    enabled:false,
    x: {
        format: 'dd MMM yyyy'
      }
  },
  states: {
    hover: {
        filter: {
            type: 'none',
        }
    }
}

};

传入的数据将包含长达 90 天的数据（90 个值）。 如何显示 x 轴来做日期？

此图表最多可显示 90 天。我曾尝试使用 momentjs 动态更改最大值和最小值，但没有成功

Answer 1

我不会将type: 'datetime' 与categories 混合使用，如果您使用categories，您可能最好使用type: 'category'。也就是说，我相信您可以采取两种方法：

1. 如果您已经格式化了日期并将它们放入类别数组中并且，您就会知道您将始终收到 90 天的值 - 那么它将按照您的预期进行格式化。这种方法有一个很好的例子here，在docs 的“1). Single values”中提到。 （这种方法目前不适用于您，因为据我所知，您的 series.data 中只有 7 个值。）

2. 使用type: 'datetime' 并删除类别。这将允许您按照您的尝试使用x.min 和x.max 进行格式化。这里需要注意的是，在传递到 ApexCharts 时，您需要在每个数据点中包含时间戳，因此您可能需要进行一些预处理。这在docs 中称为“3). 时间线系列”。我整理了一个codepen 展示了这种方法，同时使用了两种时间线系列格式。