如何使用 ApexCharts 显示时间？

Question

我知道 ApexCharts 可以帮助使用时间线图表显示数据。 但示例（vue）仅显示了如何显示日期，例如

new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime() ```

how can I change the value to display time? like 08:00-09:00

Answer 1

您可以使用图表的

xaxis

categories

选项在数据集中创建自己的 x 轴标签。

例如：

options: {
  chart: {
    id: 'mychart'
  },
  xaxis: {
    categories: ['8:00','9:00','10:00','11:00','12:00','1:00','2:00','3:00']
  }
}

Answer 2

尝试 new Date().getHour 来获取小时数 如果您希望 apexChart x 轴显示小时，请将其添加到 xaxis 部分 格式：'HH:mm'

Answer 3

在轴上使用

formatter

：https://apexcharts.com/docs/options/xaxis/。它并不完全是您要求的格式，但会为您指明正确的方向。还有 getMinutes() getSeconds() 和 GetHours() 等函数，可用于构建您想要的格式。

  xaxis: {
    type: 'datetime',
    labels: {
      formatter: function (val: number) {
        return new Date(val).toLocaleTimeString()
      }
    }
  },