如何在 x 轴上获取 highcharts 日期？

图形或图表是表示数据的最佳方式，因为它们比查看原始数据更方便用户使用。它还可以轻松地对数据进行分析。 JavaScript 中有许多库可以轻松创建这些可视化并在移动或 Web 应用程序中使用它们。 高图 JS就是一个这样的库。它是一个基于 SVG 的多平台 JavaScript 图表库，可以轻松地向应用程序添加交互式可视化。

示例：下面的示例显示了一个带有随机数据和具有 DateTime 类型的 x 轴的简单折线图。下面的代码将用于定义绘制图形的 HTML 文档。

html

JavaScript 代码显示图表及其所需参数。

javascript

// Define the chart
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'plot-container',
    type: 'line'
  },
  title: {
    text: 'Daily random data'
  },
  xAxis: {
    title: {
      text: 'Date'
    },
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Reading (in units)'
    }
  },
  
  // Define the data to be represented
  series: [{
      data: [
        12.2, 54.5, 39.1, 29.9, 100,
        35.4, 93.7, 106.4, 150, 144.0, 176.0,
        135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
        84.7, 122.9, 137.4, 135.2, 163.1, 195.2,
        195.1, 182.7, 174.3, 201.8, 199.2, 
    ],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 3600 * 1000 // one hour
  }]
});

输出：

上图为一天中的每个小时提供了一些值。例如，在 4:00 时，y 轴上的值为 100，在 8:00 时，该值为 150，依此类推。是否可以从每个时间标签的 x 轴确定日期？是的，通过观察，我们看到有两个日期：1. Jan 和 2. Jan 以及它们之间的所有时间标签表示 1. Jan 和 2. Jan 之后的时间表示当天的时间。

在这个例子中，这个观察很容易，因为图表的数据集很小。但在实际项目中，图表上表示的数据通常是巨大的，查看此类图表的用户可能希望通过浏览图表来获取有关特定日期和时间的数据。

这就是高图库提供的灵活性和控制变得有用的地方。可以通过显式定义所选轴的 DateTime 标签格式来修改库的默认行为。默认情况下，它根据下面定义的间隔为 DateTime 标签使用以下格式：

{
    millisecond: '%H:%M:%S.%L',
    second: '%H:%M:%S',
    minute: '%H:%M',
    hour: '%H:%M',
    day: '%e. %b',
    week: '%e. %b',
    month: '%b \'%y',
    year: '%Y'
}

用于表示时间的标签定义如下：

%a: Short weekday, like 'Mon'.
%A: Long weekday, like 'Monday'.
%d: Two digit day of the month, 01 to 31.
%e: Day of the month, 1 through 31.
%b: Short month, like 'Jan'.
%B: Long month, like 'January'.
%m: Two digit month number, 01 through 12.
%y: Two digits year, like 09 for 2009.
%Y: Four digits year, like 2009.
%H: Two digits hours in 24h format, 00 through 23.
%I: Two digits hours in 12h format, 00 through 11.
%l (Lower case L): Hours in 12h format, 1 through 11.
%M: Two digits minutes, 00 through 59.
%p: Upper case AM or PM.
%P: Lower case AM or PM.
%S: Two digits seconds, 00 through 59

在示例中，时间以小时为间隔在 x 轴上表示。因此，使用的默认标签是“%H:%M”，它代表数据点的两位数小时和两位数分钟值。

必须对此进行更改，以便与时间一起显示两位数的日期、短月份和四位数的年份。参考上面的标签定义，要使用的新标签是：’%H:%M %d %b %Y’

必须通过定义具有所需格式的格式化程序函数在标签属性中进行此更改。为 x 轴添加了此代码：

labels: {
  formatter: function() {
    return Highcharts.dateFormat('%H:%M %d %b %Y',this.value);
  }
}

包括更改的最终代码是：

javascript

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'plot-container',
    type: 'line'
  },
  title: {
    text: 'Daily random data'
  },
  xAxis: {
    title: {
      text: 'Date'
    },
    type: 'datetime',
      
    // Use the date format in the
    // labels property of the chart
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%H:%M %d %b %Y',
                                      this.value);
      }
    }
  },
  yAxis: {
    title: {
      text: 'Reading (in units)'
    }
  },
  
  series: [{
      data: [
        12.2, 54.5, 39.1, 29.9, 100,
        35.4, 93.7, 106.4, 150, 144.0, 176.0,
        135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
        84.7, 122.9, 137.4, 135.2, 163.1, 195.2,
        195.1, 182.7, 174.3, 201.8, 199.2, 
    ],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 3600 * 1000 // one hour
  }]
});

输出：

上面的图表现在在 x 轴上显示日期和时间。

参考：
https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
https://www.highcharts.com/forum/viewtopic。 PHP?t=13389