如何在highcharts中格式化x轴标签
我有以下highchart输出: 我只想看看x轴标签上的2月10日而不是2月10日18:00。所以所有的xaxis标签都是2月10日,2月12日,等等。但是工具提示将与输出屏幕相同。如何设置xaxis的格式,以便获得2月10日、2月12日等,而不是2月10日18:00、2月12日20:00等如何在highcharts中格式化x轴标签,highcharts,format,Highcharts,Format,我有以下highchart输出: 我只想看看x轴标签上的2月10日而不是2月10日18:00。所以所有的xaxis标签都是2月10日,2月12日,等等。但是工具提示将与输出屏幕相同。如何设置xaxis的格式,以便获得2月10日、2月12日等,而不是2月10日18:00、2月12日20:00等 $(function () { $('#container').highcharts({ chart: { zoomType: 'xy',
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 10,
labels: {
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series: [{
type: 'line',
name: 'Value',
data: chartData,
marker: {
enabled: false
}
}]
});
});
酷,试试这个:
将此格式化程序添加到xAxis
标签
对象:
xAxis {
...
labels: {
...
formatter: function() {
return this.value.toString().substring(0, 6);
},
}
}
链接:您的
dateAndTimeArray
和chartData
数组是什么样子的?如果你能修改一下你的代码,那将非常有帮助。DateAndTimeArray包含所有的日期和时间,格式为2月10日18:00,2月12日20:00,等等。chartData是另一个包含数值的数组。例如,dateAndTimeArray=[Feb-10 18:00,Feb-10 20:00,Feb-10 22:00,…,Feb-12 20:00],chartData=[93.12,94.18,98.72,…,91.24]。我使用ui:repeat获得了dateAndTimeArray和chartData,这是一个jsf代码