格式化Highcharts的X轴标签答案

【问题标题】：Format X axis Label of Highcharts格式化Highcharts的X轴标签
【发布时间】：2019-07-13 19:09:14
【问题描述】：

我已经尽可能多地开发了 Highcharts 标签，但无法按要求格式化

请告诉我如何格式化日期和时间，如随附的图片所示。

预期：

https://ibb.co/WV638L4

【问题讨论】：

【解决方案1】：

你不能同时使用category和datetime轴类型，这是两个互斥的值。但是，您可以通过使用其中之一来获得想要的结果。

对于category 轴类型设置pointPlacement 到'between' 和xAxis.labels.align 到'left'：

xAxis: {
    categories: [...],
    labels: {
        align: 'left'
    }
},
series: [{
    pointPlacement: 'between',
    data: [...]
}]

现场演示： https://jsfiddle.net/BlackLabel/fnsuxt90/

对于datetime轴类型，需要使用x和y数据值或者设置pointStart和pointInterval属性：

xAxis: {
    type: 'datetime'
},
series: [{
    pointStart: 1563040800,
    pointInterval: 1000 * 60 * 30,
    data: [...]
}]

现场演示： https://jsfiddle.net/BlackLabel/f1c59a0w/

API 参考：

https://api.highcharts.com/highcharts/series.line.label

编辑：

要将标签分成两行，请将<br>标签插入labels.formatter函数中的字符串：

xAxis: {
    ...,
    labels: {
        formatter: function() {
            return this.value.split(' ').join('<br>')
        }
    }
}

现场演示： https://jsfiddle.net/BlackLabel/vgp46bhw/

【讨论】：