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軸格式

回答

相關問題