📅  最后修改于: 2023-12-03 14:52:38.730000             🧑  作者: Mango
在 Highcharts 中,x 轴通常用于表示时间、日期或者连续的数字。你可以使用 Highcharts 提供的 API 来获取 x 轴上的日期或时间。
tickPositioner
和 tickPositions
我们可以使用 tickPositioner
和 tickPositions
属性来获取 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
来格式化日期。
pointStart
和 pointInterval
另一种获取 x 轴上的日期或时间的方法是使用 pointStart
和 pointInterval
属性。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
,并使用 pointStart
和 pointInterval
属性来指定数据点的日期和时间间隔。同时,我们也使用了 labels.formatter
来格式化日期。
以上就是在 Highcharts 中获取 x 轴上日期或时间的两种方法。你可以根据自己的需求选择其中一种方法来使用。