ApexCharts.js: 如何在折线图中为轴标签设置固定值

Question

我目前正在使用 ApexChart 显示折线图。

问题：
我想知道是否有办法设置固定轴标签值。

我的研究成果

例如：
假设我想要一个折线图，它显示 24 小时内每小时的一些计数 ，在 [00:00，06:00，12:00，18:00] 处有刻度x轴上的小时标记（这部分是我想要的）。

所以我们的图表将有 24 个数据点 [00:00, 01:00, ..., 23:00]。每小时一个。
在 x 轴上我们有时间 (hh:mm).
在 y 轴上我们有计数。

如果我只是简单地插入数据集，我会得到如下所示的图表。
如您所见，ApexCharts 自动设置 x 轴刻度值。

遗憾的是，这不是我想要的... 同样设置 tickAmount 并没有得到我想要的结果，因为 ApexChart 只是将范围（在本例中为 0-23）除以 tickAmount 以获得它的刻度。可悲的是，没有办法划分轴来获得我想要的结果。

我还以为我可以将 x 轴类型设置为类别，并且只显示每个第 n 个标签，但该选项似乎也不存在。

以下是我传递给 apexcharts 的选项

const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    data, // data as type [number, number][], first number is date, second number is count. 24 data points. one for every hour.
  },
  xaxis: {
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

更新 1：我尝试了以下更改，但无济于事我只得到了 24 个 xaxis 标签...

将 x 轴类型更改为 category
添加类别
改变tickAmount
更改数据类型（[number, number][]、{ x: number, y: number}[]、number[]）

const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    // data as...
    // type [number, number][], first number is date, second number is count.
    // type { x: number, y: number }[], x is date, y is count.
    // type number[], number is count.
    // 24 data points, one for every hour
    // I tried all data formats and nothing changed
    data, 
  },
  xaxis: {
    type: 'category',
    categories, // ['00:00', '01:00', '02:00', ..., '23:00'],
    tickAmount, // setting this didn't help
    labels: {
      show: true,
      formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
    },
  },
}

Answer 1

如果您知道 x-axis 标签应该是什么，您可以将它们作为数组包含在 categories 属性:

var options = {
  series: [{
    data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120]
  }],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    tickAmount: 10  // optional tickAmount value
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

即使标签并不总是 00:00 - 23:00，您也可以根据数据进行小时计算，将它们推送到数组，然后将其分配给 categories 属性.

例如：

let timestamps = [1599675360368, 1599678960368, 1599682560368]; // using only 3 timestamps for this, but in your data you may have up to 24
let hours = timestamps.map(i => new Date(i).getHours().toString() + ":00"); // this would become your categories array
console.log(hours);

Answer 2

如果x轴有时间序列数据，类型为datetime，可以试试：

xaxis: {
    type: 'datetime',
    min: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // start date
    max: new Date(new Date().setHours(24, 0, 0, 0)).getTime(), // end date
    tickAmount: 4, // interval you want
    labels: {
        show: true,
        formatter: function(val, timestamp) {
            return moment(new Date(timestamp)).format("HH:mm"); // formats to hours:minutes
        }        
    }
}

Answer 3

var options = {
  series: [{
    data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120]
  }],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    tickAmount: 6 // optional tickAmount value
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

ApexCharts.js: 如何在折线图中为轴标签设置固定值

ApexCharts.js: How to set fixed value for axis label in Line Chart

javascript

charts

apexcharts