Как правильно построить данные UTC в Highcharts, если метки не совпадают с осью X? - PullRequest
0 голосов
/ 03 ноября 2018

У меня есть ряд точек данных (дата и значение UTC), которые мне нужно построить с помощью Highcharts, который по умолчанию использует UTC. Однако данные могут находиться в разных часовых поясах пользователя, поэтому в этом примере я устанавливаю их в Нью-Йорк. Я заметил, что хотя подсказка на каждой из моих точек данных правильная, например, для 10/26, некоторые из них, кажется, нанесены на график в разделе, соответствующем 10/27. Я ожидаю, что все 9 точек данных за 10/26 будут построены до отметки 10/17. Кто-нибудь видит проблему в моем коде? Я создал JSFIFFLE, чтобы проиллюстрировать проблему.

var timeZone = 'America/New_York';
var timeZoneOffsetValue = moment(values[0].data[0][0]).tz("America/New_York")._offset;
console.log(timeZoneOffsetValue);
Highcharts.chart('container', {
        yAxis: {
        gridLineWidth: 0.5,
      gridLineColor: '#D6D6D6',
      tickInterval: 5,
      dashStyle: 'LongDash',
      lineColor: '#D6D6D6'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%m/%d',
          week: '%d/%b',
          month: '%b/%y',
          year: '%Y'
        },
        title: {
          enabled: true,
          text: 'date'
        },
        gridLineWidth: 0,
        lineColor: '#D6D6D6',
        lineWidth: 0.5,
        startOnTick: true
    },
    plotOptions: {
        scatter: {
          marker: {
            radius: 5,
            states: {
              hover: {
                enabled: true,
                lineColor: 'rgb(100,100,100)'
              }
            }
          },
          states: {
            hover: {
              marker: {
                enabled: false
              }
            }
          },
          tooltip: this.toolTip
        }
    },
    chart: {
        marginTop: 5,
        marginRight: 0,
        reflow: false,
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        style: {
          fontFamily: 'Open Sans'
        },
        type: 'scatter',
        spacingBottom: 0,
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    tooltip: {
        formatter: function () {
            var time = new Highcharts.setOptions({
              global: {
                timezoneOffset: -timeZoneOffsetValue
              }
            }, this);

            var s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M:%S', this.x) 
            + ' - ' + Highcharts.numberFormat(this.y, 2);
            return s;
        },
    },
    series: values
});

http://jsfiddle.net/thehme/a47Lbnwr/25/

Примечание: в моем реальном коде я заметил, что иногда, когда я впервые загружаю график, большую часть времени 3 точки данных находятся в интервале 10/27, но если я перезагружаю график затем точки данных перемещаются в диапазон дат 10/16. Это то, что делает это более запутанным.

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