如何在开始和结束时自定义xAxis标签？
我想显示开始日期和结束日期，而不只是时间。
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'PH Values'
},
subtitle: {
text: 'some subtitle'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
plotBands: [{
"from": 694004580000,
"to": 694005180000,
"color": "rgba(68, 170, 213, 0.1)",
"label": {
"text": "Snack",
"style": {
"color": "#606060"
}
}
}]
},
yAxis: {
title: {
text: 'PH Level'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} ph'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
series: [{
name: "PH Values",
data: [
[694004400000, 5.03],
[694004410000, 5.08],
[694004430000, 4.83],
[694004460000, 4.93],
[694004500000, 4.98],
[694004550000, 4.83],
[694004610000, 4.08],
[694004680000, 3.93],
[694004760000, 3.78],
[694004850000, 3.88],
[694004950000, 4.03],
[694005060000, 4.08],
[694005180000, 4.18],
[694005310000, 4.43],
[694005450000, 4.63],
[694005600000, 4.83],
[694005760000, 4.98],
[694005930000, 4.78],
[694006110000, 4.88],
[694006300000, 5.11],
[694006500000, 4.53],
[694006720000, 4.22],
[694006960000, 4.02],
[694007210000, 3.95],
[694007470000, 3.82],
[694007740000, 3.71],
[694008020000, 3.63],
[694008310000, 3.53],
[694008610000, 3.58],
[694008920000, 3.82],
[694009240000, 3.89],
[694009570000, 4.01],
[694009910000, 4.09],
[694010260000, 4.09],
[694010620000, 4.38],
[694010990000, 4.48],
[694011370000, 4.78],
[694011760000, 4.88],
[694012160000, 4.98],
[694012570000, 4.93],
[694012990000, 4.48],
[694013420000, 3.93],
[694013860000, 4.01],
[694014310000, 4.08],
[694014770000, 4.38],
[694015240000, 4.33],
[694015720000, 3.93],
[694016210000, 3.81],
[694016710000, 3.73]
]
}]
});<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
我注意到有一个formatter option for labels，但是我不知道该怎么做。我怎么知道它是第一个还是最后一个值？谢谢。
labels: {
formatter: ()=>{
if(this.isFirst || this.isLast){
return '%e. %b'
}
return this.value;
}
}
但显然不起作用。
答案 0 :(得分：1)
你很近。您只需要使用dateFormat函数就可以显示时间图表。您可以在xAxis上设置如下：
labels: {
formatter: function() {
if(this.isFirst || this.isLast){
return Highcharts.dateFormat('%e. %b', this.value)
}
return Highcharts.dateFormat('%H:%M', this.value)
}
},
此外，如果要在数据开始/结束之前/之后显示刻度，则需要在xAxis上设置以下选项：
showFirstlabel: true,
startOnTick: true,
showLastLabel: true,
endOnTick: true,
工作示例：
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'PH Values'
},
subtitle: {
text: 'some subtitle'
},
xAxis: {
showFirstlabel: true,
startOnTick: true,
showLastLabel: true,
endOnTick: true,
labels: {
formatter: function() {
if(this.isFirst || this.isLast){
return Highcharts.dateFormat('%e. %b', this.value)
}
return Highcharts.dateFormat('%H:%M', this.value)
}
},
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
plotBands: [{
"from": 694004580000,
"to": 694005180000,
"color": "rgba(68, 170, 213, 0.1)",
"label": {
"text": "Snack",
"style": {
"color": "#606060"
}
}
}]
},
yAxis: {
title: {
text: 'PH Level'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} ph'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
series: [{
name: "PH Values",
data: [
[694004400000, 5.03],
[694004410000, 5.08],
[694004430000, 4.83],
[694004460000, 4.93],
[694004500000, 4.98],
[694004550000, 4.83],
[694004610000, 4.08],
[694004680000, 3.93],
[694004760000, 3.78],
[694004850000, 3.88],
[694004950000, 4.03],
[694005060000, 4.08],
[694005180000, 4.18],
[694005310000, 4.43],
[694005450000, 4.63],
[694005600000, 4.83],
[694005760000, 4.98],
[694005930000, 4.78],
[694006110000, 4.88],
[694006300000, 5.11],
[694006500000, 4.53],
[694006720000, 4.22],
[694006960000, 4.02],
[694007210000, 3.95],
[694007470000, 3.82],
[694007740000, 3.71],
[694008020000, 3.63],
[694008310000, 3.53],
[694008610000, 3.58],
[694008920000, 3.82],
[694009240000, 3.89],
[694009570000, 4.01],
[694009910000, 4.09],
[694010260000, 4.09],
[694010620000, 4.38],
[694010990000, 4.48],
[694011370000, 4.78],
[694011760000, 4.88],
[694012160000, 4.98],
[694012570000, 4.93],
[694012990000, 4.48],
[694013420000, 3.93],
[694013860000, 4.01],
[694014310000, 4.08],
[694014770000, 4.38],
[694015240000, 4.33],
[694015720000, 3.93],
[694016210000, 3.81],
[694016710000, 3.73]
]
}]
});<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>