我对Highcharts还是相当陌生，使用他们网站上提供的示例，一切进展顺利。直到我有想法将另外两个系列的数据添加到绘图中，这都是事实：)。
[我正在尝试显示一个图，其中存在来自特定气象站的一些气象数据的时间序列，最重要的是，如果我能显示有关气象站何时发生变化的信息，即电台的接收器和天线。
如果只改变一个接收器和/或改变一个天线，一切都很好，但是，在下面的示例中已显示，多次更改后，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-照原样打开，绘图将正确地
2-从Receiver0系列中删除second和third事件，并留下only one事件[即具有3个位置的数组：1个开始，1个结束，1个null（null是指将连接到第二个事件的连接线去掉）]，xAxis将正常日期正确地render。
我整天都在挠头，但我不知道可能出什么问题。
感谢您的任何帮助：）
编辑：通过添加其他隐藏的xAxis并将其他2系列引用到此新xAxis来解决。
注意，在控制台中会出现Highcharts错误＃15-https://www.highcharts.com/errors/15/，这很合理，因为null会破坏xAxis上的升序。
作为解决方案，您可以为空值粘贴与前一个点相同的数据时间：
演示：https://jsfiddle.net/BlackLabel/m8wnv9bf/
data:[
[1574035200000, 2.0687167703582],
[1574035200000, 2.492349020252],
[1574035200000, null],
[1575158400000, 2.0687167703582],
[1575158400000, 2.492349020252],
[1575158400000, null],
[1576713600000, 2.0687167703582],
[1576713600000, 2.492349020252],
],
或考虑将这些行渲染为xAxis plotLines，但是如果要保留切换功能，则需要为这些行创建自定义图例：
演示：https://jsfiddle.net/BlackLabel/ozq23a46/
render() {
//create the custom legend for the plotLines
let chart = this,
xAxis = chart.xAxis[0];
//check if legend exists after window resize
if(chart.customLegend) {
chart.customLegend.destroy();
}
chart.customLegend = chart.renderer.label('Receiver Change', 270, 50)
.css({})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6,
})
.add();
//add hide/show func
chart.customLegend.element.onclick = function() {
xAxis.plotLinesAndBands.forEach(pl => {
if (pl.id === "RC") {
if (!pl.svgElem.visibility || pl.svgElem.visibility === 'visible') {
pl.svgElem.hide();
} else {
pl.svgElem.show();
}
}
})
}
}
API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API：https://api.highcharts.com/highcharts/chart.events.render