Как изменить формат DateTime на Highcharts? - PullRequest
Новая
       73

Как изменить формат DateTime на Highcharts?

0 голосов
/ 28 апреля 2020

У меня есть данные даты и времени на json, которые выглядят так: «отметка времени»: «2020-03-15T11: 46: 10 + 07: 00». Как я могу изменить формат даты в чч: мм на старших графиках? Это мой код: https://jsfiddle.net/estri012/q89vt1j0/13/ Но, похоже, не сработало. Формат даты не изменится. 

Highcharts.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
var accelero_x = [], timestamp = [];
for (var i = 0; i < data.length; i++) {
accelero_x.push(data[i].accelero_x);
timestamp.push(data[i].timestamp);
}
console.log(accelero_x);
console.log(timestamp);

// Create the chart
var chart = new Highcharts.Chart({
chart: {
  type: 'spline',
  renderTo: 'container'
},
title: {
  text: 'Coba'
},
tooltip: {
  valueDecimals: 2
},
subtitle: {
  text: 'Accelero X'
},
xAxis: {
    type: "datetime",
  categories: timestamp,
  labels: {
        format: '{value:%Y-%m-%d}',
        rotation: 45,
        align: 'left'
    }

},
series: [{
  data: accelero_x //
}]
});
});

Обновление: я обновляю свой код здесь http://jsfiddle.net/estri012/b5nhezLs/8/ И новая проблема заключается в том, что моя метка времени выглядит следующим образом "2020-03-15T11: 46 : 10 + 07: 00" . Поэтому на графике должно быть 15 марта 11:46 вместо 15 марта 04:46. График показывает время UT C. Как это исправить, чтобы график показывал одновременно с моим? И последние три данных на графике показывают 18 марта вместо 19 марта. В моем API https://gmlews.com/api/data последние три данные должны быть 19 марта, а не 18 марта

Ответы [ 2 ]

2 голосов
/ 28 апреля 2020

Поскольку highcharts имеет встроенный форматер для дат: https://api.highcharts.com/class-reference/Highcharts# .dateFormat

Я бы предложил сделать это следующим образом:

Вам необходимо преобразовать метку времени строка в формате даты, используя Date.parse().

После определения массива измените (или переопределите, если хотите) его на даты, сопоставив все значения с датой, используя Date.parse (или сделайте это, как вы загрузить массив): 

timestamp = timestamp.map(x=>Date.parse(x))

и тогда стандартное форматирование должно сработать, вам просто нужно изменить его на время. В моем примере я изменил его на «дневные часы: минуты: секунды» 

format: '{value:%d %H:%M:%S}'

Рабочая jsfiddle: https://jsfiddle.net/pqocv312/

1 голос
/ 28 апреля 2020

Используйте это для форматирования 

formatter: (currData) => {
     const currDate = new Date(currData.value);
     return currDate.getHours() + ':' + currDate.getMinutes();
},

Fiddle - https://jsfiddle.net/5hupyv8m/1/

или

просто обновите для l oop для x метки оси

Как 

for (var i = 0; i < data.length; i++) {
    accelero_x.push(data[i].accelero_x);
    const currTimeStamp = new Date(data[i].timestamp);
    timestamp.push(currTimeStamp.getHours() + ':' + currTimeStamp.getMinutes());
}

https://jsfiddle.net/4poc6re7/

Обновление

Вы можете использовать эту функцию для преобразования времени в hh:mm формат 

 function format_two_digits(n) {
   return n < 10 ? '0' + n : n;
 }

Обновленная скрипта: https://jsfiddle.net/4poc6re7/1/

...