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}

来源

2017-03-07 Callum Luke Vernon

所以你已经得到了基于时间戳的点，但是你错过了X轴上的正确标签？我不会触摸模型（时间戳）。我会创建一个函数f.x. 'createLabelFromTimestamp（时间戳）'。然后提取HMS并根据它们计算周期。如果它是0，则返回日期而不是周期数。 –

我如何得到这个显示在xAxis标签？ –

http://api.highcharts.com/highcharts/xAxis.labels.formatter –

假设您的系列数据按照[<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它的行动。

来源

2017-03-08 15:12:55

Highcharts - 自定义X轴格式

回答

相关问题