X軸格式的Highcharts標簽

Question

我已經盡可能地開發了Highcharts標簽，但無法按照要求進行格式化

請告訴我如何格式化日期和時間，如隨附的圖片所示。

預期：

https://ibb.co/WV638L4

Answer 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

編輯：

要將標簽分為兩行， labels.formatter <br>標簽插入labels.formatter函數中的字符串：

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

現場演示： https : //jsfiddle.net/BlackLabel/vgp46bhw/