[SOLVED] ApexCharts.js：如何为折线图中的轴标签设置固定值

如何解决[SOLVED] ApexCharts.js：如何为折线图中的轴标签设置固定值

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

问题：
我想知道是否可以设置固定轴标签值。

---

解决方案：
通过将x轴设置为type: category并设置tickAmount来解决。 （请注意，该解决方案不允许您以所需的任何方式直接设置x轴标签，但允许您设置x轴标签数组并调整以tickAmount显示。）>

需要注意的事情

• 确保您的apexcharts版本是最新的。将tickAmount设置为type: 'category'是最近的更新（截至本文）。（https://github.com/apexcharts/apexcharts.js/releases/tag/v3.20.1）
• 系列数据必须为数字[]；所有其他数据类型（[数字，数字] []或{x：数字，y：数字} []）不适用于tickAmount。

const options = {
  chart: {
    type: 'line',},series: {
    name: 'count',// data as type number[],number is count.
    // 24 data points,one for every hour
    data,xaxis: {
    type: 'category',// set type to category
    categories,// ['00:00','01:00','02:00',...,'23:00'],set array of categories
    tickAmount,// set tickAmount to split x-axis
    labels: {
      show: true,formatter: (val: string) => formatDateToHHmm(val),// just formats date to hh:mm format
    },}

---

我的研究成果

例如：
假设我想要一个折线图，该折线图显示24小时内每小时的某些计数，并在x轴的[00：00、06：00、12：00、18：00]小时标记处打勾（这就是我想要的。）

因此，我们的图形将具有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',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,}

---

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

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

const options = {
  chart: {
    type: 'line',// data as...
    // type [number,second number is count.
    // type { x: number,y: number }[],x is date,y is count.
    // type number[],one for every hour
    // I tried all data formats and nothing changed
    data,categories,tickAmount,}

解决方法

如果知道x轴标签应该是什么，则可以将它们作为数组包含在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);

,

如果xaxis具有类型为dateti的时间序列数据，则可以尝试以下操作：

xaxis: {
    type: 'datetime',min: new Date(new Date().setHours(0,0)).getTime(),// start date
    max: new Date(new Date().setHours(24,// 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
        }        
    }
}