Highcharts - 自定义X轴格式
问题描述:
我想知道是否有可能为highcharts中的xAxis定义自定义排序或格式。我的数据集有一个日期时间,可用于xAxis,但我的客户已指定它应在xAxis上显示“期间”。一段时间被指定为30分钟片段 - 意味着一天有48个时段。Highcharts - 自定义X轴格式
数据的范围是从前一天的一段时间到该时段的当天。例如2017年6月3日11期(10:00)至2017年7月3日11期间,x轴应该像这样:
目前我已经尝试做到这一点通过摆弄每个点的实际日期时间,以便将其设置为Ymd H:i:{Period},然后使用dateFormat仅显示xAxis上的秒数。然而,这会在数据之间留下一段空隙2017-03-06 23:59:{期间48}和2017-03-07 00:00:{期间11}
答
假设您的系列数据按照[<timestamp in milliseconds>, <value>]
您可以将您的数据放在一边,简单地进行标签的计算和演示。
为了显示我们想要的标签,我们使用xAxis.labels.formatter
(可能还有tickInterval
将它们按照我们的需要进行分隔)。例如:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return createLabelFromTimestamp(this.value);
}
},
tickInterval: 1800000
}
(如问题所述)的周期数的计算可以例如就像这样:
function createLabelFromTimestamp(timestamp) {
var hms = timestamp % (1800000 * 48);
var period = hms/1800000;
// if 0-th period, show date instead
if(period == 0) {
var date = new Date(timestamp);
return date.toDateString();
}
// otherwise show period number
else {
return period;
}
}
我们只是模要走的那天和鸿沟查找30-我们所在的分钟段。
请参阅this JSFiddle example它的行动。
所以你已经得到了基于时间戳的点,但是你错过了X轴上的正确标签?我不会触摸模型(时间戳)。我会创建一个函数f.x. 'createLabelFromTimestamp(时间戳)'。然后提取HMS并根据它们计算周期。如果它是0,则返回日期而不是周期数。 –
我如何得到这个显示在xAxis标签? –
http://api.highcharts.com/highcharts/xAxis.labels.formatter –