Javascript don't display the correct time when calling the API in highcharts - Stack Overflow

admin管理员组

文章数量:1244331

i use an API to retrieve weather data from Brightsky. The data itself is displayed correctly. Only the time always starts at January 1st 00:00:00:000. How can I get the time displayed correctly?

example: jsfiddle

I have already tried to adapt the code with

const categories = weatherData.map(entry => new Date(entry.timestamp + 'Z').getTime()); without success

i use an API to retrieve weather data from Brightsky. The data itself is displayed correctly. Only the time always starts at January 1st 00:00:00:000. How can I get the time displayed correctly?

example: jsfiddle

I have already tried to adapt the code with

const categories = weatherData.map(entry => new Date(entry.timestamp + 'Z').getTime()); without success

• javascript
• time
• highcharts

Share Improve this question Follow edited Feb 16 at 18:26 Mi Wi asked Feb 16 at 15:02 Mi WiMi Wi 1322 bronze badges 2

• Does this actually have anything to do with Java? It looks more like JavaScript – g00se Commented Feb 16 at 16:04
• 1 you fot to actually USE const categories – Bravo Commented Feb 16 at 21:57

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You can (and most likely should) stick to datetime xAxis type, just add proper timestamp data to your series data like so:

const weatherData = data.weather;
    
const temperatureData = weatherData.map(entry => ({
  x: new Date(entry.timestamp).getTime(),
  y: entry.temperature
}));
    
const pressureData = weatherData.map(entry => ({
  x: new Date(entry.timestamp).getTime(),
  y: entry.pressure_msl
}));

You can further adjust the xAxis labels display based on the API: https://api.highcharts/highcharts/xAxis.dateTimeLabelFormats

Here is your demo working well: https://jsfiddle/BlackLabel/c62uy7gz/

Kind regards,

add line: categories: categories, in xAxis in your JSfiddle like this:

...
xAxis: {
    categories: categories, // <- add this line
    type: 'datetime',
    labels: {
        rotation: -45,
        formatter: function () {
            return new Date(this.value).toLocaleString('de-DE', {
                weekday: 'short',
                hour: '2-digit',
                minute: '2-digit',
                day: '2-digit',
                month: '2-digit', 
                year: 'numeric'
            });
        }
    }
},
...

and here is a result (i also changed some date formating just to be sure that all workong correctly):

also according to Date.prototype.toLocaleString() MDN docs:

Every time toLocaleString is called, it has to perform a search in a big database of localization strings, which is potentially inefficient. When the method is called many times with the same arguments, it is better to create a Intl.DateTimeFormat object and use its format() method, because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database, so future format calls can search for localization strings within a more constrained context.

so if you care about speed you need to follow recommendations

本文标签： Javascript don39t display the correct time when calling the API in highchartsStack Overflow