Highcharts - 自定义 X 轴格式答案

【问题标题】：Highcharts - Custom X axis formatHighcharts - 自定义 X 轴格式
【发布时间】：2017-03-07 10:34:19
【问题描述】：

我想知道是否可以在 highcharts 中为 xAxis 定义自定义排序或格式。我的数据集有一个用于 xAxis 的日期时间，但是我的客户已指定它应该在 xAxis 上显示“期间”。一个周期被指定为一个 30 分钟的切片 - 这意味着一天有 48 个周期。

数据的范围是从前一天的某个时间段到该时间段的当天。例如 2017 年 6 月 3 日第 11 期 (10:00) 到 2017 年 7 月 3 日第 11 期，xAxis 应如下所示：

目前我试图通过摆弄每个点的实际 dateTime 来做到这一点，以便将其设置为 Y-m-d H:i:{Period}，然后使用 dateFormat 仅在 xAxis 上显示秒。然而，这在 2017-03-06 23:59:{Period 48} 和 2017-03-07 00:00:{Period 11}

之间留下了数据空白

【问题讨论】：

所以您已经根据时间戳获得了分数，但是您在 X 轴上缺少正确的标签？我不会碰模型（时间戳）。我会创建一个函数 f.x。 createLabelFromTimestamp(timestamp)。然后提取HMS并根据它们计算周期。如果为 0，则返回日期而不是期间号。
我如何让它显示在 xAxis 标签中？
api.highcharts.com/highcharts/xAxis.labels.formatter
appologies 我没有得到这个排序，在下面的小提琴中：jsfiddle.net/kyL093au 如何让 x 轴显示“sp”值？
这似乎不是您想做的事情...您能显示一些您的数据吗？它是如何指定的？我假设您的系列数据类似于 [[<timestamp in milliseconds>, <value>], [<timestamp in millseconds>, <value>]], f.x [[1800000, 5], [3600000, 10]]...

标签： highcharts

【解决方案1】：

假设您的系列数据是成对排列的[<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 的实际应用。

【讨论】：