javascript - 使用多个系列的 xAxis 的 Highcharts 问题

Question

我对 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 来解决。

Answer 1

请注意，在您的控制台中出现 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