How to tell Highcharts to set date on the x axis,

2019-08-10 16:20发布

问题:

I am trying to understand the issue here; I have a data file that contains dates for each of my value. When I use it on the x axis; the result is that I will have the x axis split the values evenly, so if a point is at 2:30 2:31 and another at 2:32, the values will be side by side, evenly spaced; while I would expect that the x axis would be split based on the first and last date (like in 2 if there are 2 days, in 3 if there are 3 days and so on)

Instead I would like to have a range based on a hour, or a day, and see how many points fits in that range. This is the example of how the data is organized:

a,b,c,d
1.1,2.2,3.3,4.4
Jun 13 22:30, jun 13 23:02, Jun 13 23:05, Jun 14 1:10

I have set the type as datetime in the x axis, and the 3rd line with dates, is assigned to the categories.

EDIT:

Seems that the problem is the date format; I convert successfully the string into date

new Date(value) 

Which returns me the full date format:

Wed Jul 11 -001 17:32:10 GMT-0700 (PDT)

The strange thing is that the tooltip, which I set to display this.x, is showing numbers from 1 to 10, instead than the date. Not sure if this may be the cause why I can't make a graph like this, using my data as in the example above.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/

EDIT 2: Thanks to Sebastian and Skram for the suggestions, I was able to get to this point:

http://jsfiddle.net/newbiez/AeFp3/3/

Now this is doing almost everything right; except that if I comment out the tickInterval, I will get 4 tick, one point each (the original problem); while if I uncomment it; the chart draw the first date, but not the others

回答1:

So, after a lots of trial by error and suggestions here and there (Thanks Sebastian and Skram), found what is wrong.

1) You need to convert dates: as string they won't work, because Highcharts expect to see dates in milliseconds. In addition to this, you must set xAxis type: 'datetime'.

2) While in other cases you can put one set of value in an array, and another in a second array, and place them as categories and series; when you deal with date you need to have a 2D array with (converted)date and related value.

3) You must not assign the data to the categories; otherwise you will spend hours trying to figure out why it won't work. You simply need to add the 2D array in data: and it will just work™

Hope that this will help others; spent quite a lot of time to figure this out, and thanks to other members that made me get closer to the solution!



标签: highcharts