高圖-自定義X軸格式

Question

我想知道是否有可能在highcharts中為xAxis定義自定義順序或格式。 我的數據集有一個用於xAxis的日期時間，但是我的客戶指定它應該在xAxis上顯示“ Period”。 將一個時段指定為30分鍾片段-表示一天中有48個時段。

數據范圍是從前一天的一個期間到具有該期間的當天。 例如，從06/03/2017期間11（10:00）到07/03/2017期間11，xAxis應該如下所示：

目前，我嘗試通過擺弄每個點的實際dateTime來做到這一點，因此將其設置為Ymd H：i：{Period}，然后使用dateFormat在xAxis上僅顯示秒。 但是，這在2017-03-06 23:59：{Period 48}和2017-03-07 00:00：{Period 11}之間留下了數據缺口

Answer 1

假設系列數據按[<timestamp in milliseconds>, <value>]對的形式排列，則可以不理會數據，而是可以簡單地進行標簽的計算和表示。

為了顯示我們想要的標簽，我們使用xAxis.labels.formatter （並可能使用tickInterval來根據需要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分鍾時段。

請參見此JSFiddle實際示例 。