Проблема Highcharts с xAxis при использовании нескольких серий - PullRequest
3 голосов
/ 17 января 2020

Я довольно новичок в 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.

1 Ответ

1 голос
/ 20 января 2020

Обратите внимание, что в вашей консоли возникает ошибка 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...