我对 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 - 按原样打开，绘图将无法正确渲染 xAxis；
2 - 从 Receiver0 系列中删除第二和第三事件，并仅留下一个 事件 [即具有 3 个位置的数组:1 个开始、1 个结束、1 个空(空是删除第二个事件的连接线)] 并且 xAxis 将使用正常日期正确渲染。
我一整天都在摸不着头脑，但我不知道哪里出了问题。
提前感谢您的帮助:)
编辑: 通过添加额外的隐藏 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
关于javascript - 使用多个系列的 xAxis 的 Highcharts 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59792992/