我正在使用 Highcharts 来构建一个图表,该图表具有多个基于日期时间的 y 轴和 x 轴。但我看到无论我为 X 轴提供 Highcharts 的格式,它都不遵守日期是连续的(例如:七月 01、七月 02、七月 03)。X 轴始终给出格式:日期。月,尽管我指定了日期/月。
谁能帮我设置配置选项。
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e/%b'
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'Snow depth (m)'
},
min: 0
}, {
opposite: true,
title: {
text: 'Snow height (m)'
},
min: 0
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// 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.
yAxis: 1,
data: [
[Date.UTC(2016, 7, 01), 4],
[Date.UTC(2016, 7, 02), 5],
[Date.UTC(2016, 7, 03), 15]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(2016, 7, 01), 44],
[Date.UTC(2016, 7, 02), 5],
[Date.UTC(2016, 7, 03), 135]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
最佳答案
将您的dateTimeLabelFormats
更改为,
dateTimeLabelFormats: {
day: '%e / %b',
week: '%e / %b'
}
将解决问题。
工作 JSFiddle 演示: https://jsfiddle.net/6jo3gvfa/
希望这有帮助!
关于javascript - Highcharts 不遵循标签格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39159171/