[英]Format X axis Label of Highcharts
I have developed the Highcharts label as much as possible but not able to format as required 我已经尽可能地开发了Highcharts标签,但无法按照要求进行格式化
https://jsfiddle.net/5ug4wpbz/1/ https://jsfiddle.net/5ug4wpbz/1/
Please tell me how to format the date and time as shown in the image attached with this. 请告诉我如何格式化日期和时间,如随附的图片所示。
Expected : 预期:
https://ibb.co/WV638L4
You can not use category
and datetime
axis type together, these are two mutually exclusive values. 您不能同时使用
category
和datetime
轴类型,这是两个互斥的值。 However, you can achieve the wanted result by using one of them. 但是,您可以通过使用其中之一来获得所需的结果。
For category
axis type set pointPlacement
to 'between'
and xAxis.labels.align
to 'left'
: 对于
category
轴类型,将pointPlacement
设置为'between'
,将xAxis.labels.align
为'left'
:
xAxis: {
categories: [...],
labels: {
align: 'left'
}
},
series: [{
pointPlacement: 'between',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/fnsuxt90/ 现场演示: https : //jsfiddle.net/BlackLabel/fnsuxt90/
For datetime
axis type, you need to use x
and y
data values or set pointStart
and pointInterval
properties: 对于
datetime
时间轴类型,您需要使用x
和y
数据值或设置pointStart
和pointInterval
属性:
xAxis: {
type: 'datetime'
},
series: [{
pointStart: 1563040800,
pointInterval: 1000 * 60 * 30,
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/f1c59a0w/ 现场演示: https : //jsfiddle.net/BlackLabel/f1c59a0w/
API Reference: API参考:
https://api.highcharts.com/highcharts/series.line.label https://api.highcharts.com/highcharts/series.line.label
https://api.highcharts.com/highcharts/series.line.pointPlacement https://api.highcharts.com/highcharts/series.line.pointPlacement
https://api.highcharts.com/highcharts/series.line.type https://api.highcharts.com/highcharts/series.line.type
EDIT: 编辑:
To split the label into two lines, inset <br>
tag to a string in labels.formatter
function: 要将标签分为两行,
labels.formatter
<br>
标签插入labels.formatter
函数中的字符串:
xAxis: {
...,
labels: {
formatter: function() {
return this.value.split(' ').join('<br>')
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/vgp46bhw/ 现场演示: https : //jsfiddle.net/BlackLabel/vgp46bhw/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.