📜  如何在 x 轴上获取 highcharts 日期?(1)

📅  最后修改于: 2023-12-03 14:52:38.730000             🧑  作者: Mango

如何在 x 轴上获取 Highcharts 日期?

在 Highcharts 中,x 轴通常用于表示时间、日期或者连续的数字。你可以使用 Highcharts 提供的 API 来获取 x 轴上的日期或时间。

方法 1:使用 tickPositionertickPositions

我们可以使用 tickPositionertickPositions 属性来获取 x 轴上的日期或时间。其中,tickPositions 可以指定刻度线的位置,tickPositioner 则可以自定义刻度线的位置。下面是一个例子:

xAxis: {
  type: 'datetime',
  tickPositions: [Date.UTC(2021, 0, 1), Date.UTC(2021, 1, 1), Date.UTC(2021, 2, 1)],
  tickPositioner: function () {
    var positions = [Date.UTC(2021, 0, 1), Date.UTC(2021, 1, 1), Date.UTC(2021, 2, 1)];
    return positions;
  },
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%Y-%m-%d', this.value);
    }
  }
}

在上面的例子中,我们将 x 轴的类型设置为 datetime,并使用 tickPositions 属性指定三个日期作为刻度线的位置。同时,我们还使用了 tickPositioner 属性来自定义刻度线的位置,并在 labels.formatter 中使用 Highcharts.dateFormat 来格式化日期。

方法 2:使用 pointStartpointInterval

另一种获取 x 轴上的日期或时间的方法是使用 pointStartpointInterval 属性。pointStart 可以指定第一个数据点的日期或时间,pointInterval 则可以指定数据点之间的时间间隔。下面是一个例子:

xAxis: {
  type: 'datetime',
  pointStart: Date.UTC(2021, 0, 1),
  pointInterval: 24 * 3600 * 1000, // 一天的时间间隔
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%Y-%m-%d', this.value);
    }
  }
}

在上面的例子中,我们同样将 x 轴的类型设置为 datetime,并使用 pointStartpointInterval 属性来指定数据点的日期和时间间隔。同时,我们也使用了 labels.formatter 来格式化日期。

以上就是在 Highcharts 中获取 x 轴上日期或时间的两种方法。你可以根据自己的需求选择其中一种方法来使用。