如何在Highstock图表上更改UTC时间戳?

问题描述 投票:0回答:1

我在https://gmlews.com/api/data处有一个API。还有我在http://jsfiddle.net/estri012/b5nhezLs/8/中的highstock图表代码。

我的问题是我的时间戳看起来像是“ 2020-03-15T11:46:10 + 07:00”。因此,在图表上应显示3月15日11:46而不是3月15日04:46。但是图表显示了UTC时间。如何解决这个问题,以便图表显示与我的本地时间相同的时间?图表上的最后三个数据显示3月18日,而不是3月19日。在我的API中,最后三个数据必须是3月19日,而不是3月18日。

$(function () {

$.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
function format_two_digits(n) {
  return n < 10 ? '0' + n : n;
}
var accelero_x = [], timestamp = [];
  for (var i=0; i<data.length; i++){
  let inArr = [];
  inArr.push(Date.parse(data[i].timestamp));
  inArr.push(data[i].accelero_x);
    accelero_x.push(inArr);
    timestamp.push(data[i].timestamp);
 }
  console.log(accelero_x);
  console.log(timestamp);

    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            inputEnabled: true,
                    buttons: [{
                        type: 'day',
                        count: 1,
                        text: '1D',
                    },
                    {
                        type: 'week',
                        count: 1,
                        text: '1W',
                    },
                    {
                        type: 'month',
                        count: 1,
                        text: '1M',
                    },
                    {
                        type: 'year',
                        count: 1,
                        text: '1Y',
                    }, {
                        type: 'all',
                        count: 1,
                        text: 'All',
                    }],
            inputDateFormat: '%d-%m-%Y',
            inputDateParser: function (value) {
                value = value.split('-');
                return Date.UTC(
                    parseInt(value[2]),
                    parseInt(value[1]) - 1,
                    parseInt(value[0])
                );
            },
        },

    title: {
    text: 'Accelero X'
},

xAxis: {
    type: "datetime",
  labels: {
        /* format: '{value:%Y-%m-%d}', */
        formatter: (currData) => {
          const currDate = new Date(currData.value);
          return format_two_digits(currDate.getHours()) + ':' + format_two_digits(currDate.getMinutes());
        },
        rotation: 45,
        align: 'left'
    }
},
series: [{
    name: 'Accelero X',
    data: accelero_x,
    type: 'spline',
    tooltip: {
        valueDecimals: 2
    }
}]
}, function (chart) {

        // apply the date pickers
        setTimeout(function () {
            $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker();
        }, 0)
    });
});


// Set the datepicker's date format
$.datepicker.setDefaults({
    dateFormat: 'dd-mm-yy',
    beforeShow: function() {
      var date = $(this).val().split('-');
        $('input.highcharts-range-selector').datepicker("setDate", new Date(parseFloat(date[0]), parseFloat(date[1]) - 1, parseFloat(date[2])));
    },
    onSelect: function (dateText) {
        this.onchange();
        this.onblur();
    }
});

});
javascript datetime highcharts timestamp datetime-format
1个回答
0
投票

尝试将time.useUTC设置为false-https://api.highcharts.com/highcharts/time.useUTC

演示:http://jsfiddle.net/BlackLabel/avhw7km8/

  time: {
    useUTC: false
  },
© www.soinside.com 2019 - 2024. All rights reserved.