Я довольно новичок в Highcharts, и все прошло отлично, используя примеры, представленные на их сайте. Это было правдой, пока у меня не возникла идея добавить еще две серии данных к моему графику :).
Я пытаюсь показать график, где есть временные ряды некоторых метеорологических данных от конкретной метеостанции c, и было бы неплохо, если бы я мог показывать информацию о том, когда произошли изменения в метеостанции. произошла станция, а именно смена приемника и антенны станции.
Все хорошо, если есть только одна смена приемника и / или одна смена антенны, однако, как показано в примере ниже, с несколькими изменениями xAxis перестает показывать нормальные даты и, проверяя код, выдает только один тик в 2025.0, что неверно, поскольку в этот период нет данных.
(function ($) {
$(function () {
Highcharts.dateFormats = {
DOY: function (timestamp) {
var date = new Date(timestamp);
var d= new Date(date.getFullYear(), 0, 0);
return ('00' + Math.floor((date-d)/8.64e+7)).slice(-3);
},
DEC: function (timestamp) {
var date = new Date(timestamp);
return ((1970 + date/(365*8.64e+7)).toFixed(1))
},
WEEK: function (timestamp) {
var date = new Date(timestamp);
var dgps = new Date(1980,0,6,0,0,0);
return Math.floor((date-dgps)/(7*8.64e+7));
}
};
// Meteo chart
Highcharts.chart('plot', {
chart: {
renderTo: 'plot',
zoomType: 'x',
panning: true,
panKey: 'shift',
borderWidth: 1,
borderColor: 'grey',
style: {
fontFamily: 'arial'
},
height: 464
},
title: {
text: 'DEM3',
align: 'left',
x: 10
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'right',
verticalAlign: 'top',
width: 300,
itemWidth: 190,
top:70
},
boost: {
useGPUTranslations: true,
usePreAllocated: true
},
xAxis:
{ type: 'datetime',
title: {
enabled: true,
text: 'Year',
style: {
color: '#c0aa7d',
fontWeight: 'bold',
fontSize: '12px'
}
},
labels: {
format: '{value: %DEC}'
},
lineWidth: 1,
lineColor: '#c0aa7d',
min: 1567023200000,
max: 1578787200000,
},
yAxis:[
{
title: {
text: 'Zenith Total Delay (m)',
style: {
color: '#c0aa7d',
fontWeight: 'bold',
fontSize: '12px'
}
},
lineWidth:0.5,
top: 100,
startOnTick: false,
endOnTick: false,
tickInterval: 0.05,
minorTickInterval: 0.05,
minorTickLength: 0,
min: 2.0687167703582,
max: 2.492349020252,
}],
plotOptions: {
series: {
lineWidth: 0,
marker: {
radius: 2,
symbol: 'circle'
},
turboThreshold: 10000
}
},
series: [ {
id: 'Antenna0',
name: 'Antenna Change',
type:'line',
color: '#35a62a',
dashStyle: 'Solid',
data: [
[1574035200000,2.068716770358151],
[1574035200000,2.4923490202520044]
],
yAxis: 0,
lineWidth: 2,
enableMouseTracking: false,
marker: {
radius: 0
}
}, {
id: 'Receiver0',
name: 'Receiver Change',
type:'line',
color: '#AE0016',
dashStyle: 'longdash',
data:[
[1574035200000, 2.0687167703582],
[1574035200000, 2.492349020252],
[null, null],
[1575158400000, 2.0687167703582],
[1575158400000, 2.492349020252],
[null, null],
[1576713600000, 2.0687167703582],
[1576713600000, 2.492349020252],
],
yAxis: 0,
lineWidth: 1.5,
enableMouseTracking: false,
marker: {
radius: 0
}
},{
type: 'scatter',
name: 'Zenith Total Delay (m)',
color: '#C0B5A9',
marker: {
enabled: true,
symbol: 'circle',
radius: 1.5,
fillColor: '#c0aa7d'
},
data: [
[1567123200000, 2.2877],
[1567209600000, 2.2824],
[1567296000000, 2.266],
...
[1578614400000, 2.2127],
[1578700800000, 2.222],
[1578787200000, 2.2145],
],
yAxis: 0,
}]
});
});
})(jQuery);
Пример: https://jsfiddle.net/rgcouto/9qv2ehp7/1/
Шаги для воспроизведения:
1 - Откройте как есть, и на графике не будет правильно отображаться xAxis;
2 - Удалите второе и третье событие из серии Receiver0 и оставьте только одно событие [ т.е. массив с 3 позициями: 1 старт , 1 end, 1 null (null - удалить соединительную линию для второго события)], и xAxis будет отображать правильно с нормальными датами.
Я весь день чесал голову сейчас и пока я не могу понять, что может быть не так.
Заранее благодарен за любую помощь:)
РЕДАКТИРОВАТЬ: Решено путем добавления дополнительных скрытых xAxis и ссылка на другие 2 серии на эту новую xAxis.