如何将 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'。也就是说，我相信您可以采取两种方法：

如果您已经格式化日期并将它们放入类别数组和您知道您将始终收到 90 天的价值 -然后它将按照您的预期进行格式化。在“1.Single values”下有一个很好的方法示例 here, referred to in the docs。（这种方法目前对您不起作用，因为据我所知，您的 series.data 中只有 7 个值。）
使用 type: 'datetime' 并删除类别。这将允许您像您尝试的那样使用 x.min 和 x.max 进行格式化。这里需要注意的是，在传递给 ApexCharts 时，您需要在每个数据点中包含时间戳，因此您可能需要进行一些预处理。这在 docs. I put together a codepen 中称为“3. 时间轴系列”，显示了这种方法，同时使用了两种时间轴系列格式。

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

How to dynamically change the x-axis in ApexCharts to dates?

javascript

arrays

json

date

apexcharts