高图-自定义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实际示例 。