如何更改 Highcharts 上的日期时间格式？

Question

我在 json 上的日期时间数据如下所示："timestamp": "2020-03-15T11:46:10+07:00"。如何在 highcharts 上将日期格式更改为 HH:mm？这是我的代码：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”。因此在图表上它应该显示 3 月 15 日 11:46 而不是 3 月 15 日 04:46。图表显示 UTC 时间。如何修复它，让图表显示与我相同的时间？图表上的最后三个数据显示的是 3 月 18 日而不是 3 月 19 日。在我的 API https://gmlews.com/api/data 中，最后三个数据必须是 3 月 19 日而不是 3 月 18 日

Answer 1

用它来格式化

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

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

或

只需更新 x 轴标签的 for 循环

喜欢

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;
 }

已更新 fiddle：https://jsfiddle.net/4poc6re7/1/

Answer 2

因为 highcharts 有一个内置的日期格式化程序：https://api.highcharts.com/class-reference/Highcharts#.dateFormat

我建议这样做：

您需要使用 Date.parse().

将时间戳字符串转换为日期格式

定义数组后，通过使用 Date.parse（或在加载数组时执行此操作）将所有值映射到日期，将其更改（或重新定义，如果需要）：

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

然后标准格式应该可以工作，您只需要将其更改为时间。在我的示例中，我将其更改为 "day hours:minutes:seconds"

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

工作 jsfiddle：https://jsfiddle.net/pqocv312/

如何更改 Highcharts 上的日期时间格式？

How to change DateTime format on Highcharts?

javascript

datetime

datetime-format

highcharts