如何告诉Highcharts在x轴上设置日期并使用时间范围(例如1天) [英] How to tell Highcharts to set date on the x axis, and use a range of time (like 1 day)
问题描述
我试图在这里理解这个问题；我有一个数据文件，其中包含每个值的日期.当我在x轴上使用它时；结果是我将使x轴将值平均分割，因此，如果一个点在2:30 2:31处，另一个在2:32，则这些值将并排，均匀间隔；而我希望x轴会根据第一个和最后一个日期(例如，如果有2天，则在2中；如果有3天，则在3中，依此类推)进行分割
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
我在x轴上将类型设置为datetime，并将带有日期的第三行分配给类别.
I have set the type as datetime in the x axis, and the 3rd line with dates, is assigned to the categories.
似乎问题在于日期格式；我成功地将字符串转换为日期
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:
7月11日星期三-001 17:32:10 GMT-0700(PDT)
Wed Jul 11 -001 17:32:10 GMT-0700 (PDT)
奇怪的是，我设置为显示this.x的工具提示显示的是1到10之间的数字，而不是日期.不知道这是否是为什么无法像上面的示例一样使用我的数据来制作这样的图形的原因.
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.
感谢Sebastian和Skram的建议，我能够做到这一点:
EDIT 2: Thanks to Sebastian and Skram for the suggestions, I was able to get to this point:
http://jsfiddle.net/newbiez/AeFp3/3/
现在，这几乎可以正确执行所有操作；除非我注释掉tickInterval，否则我将获得4个滴答声，每个滴答声一个点(原始问题)；如果我不加评论的话；图表绘制了第一个日期，但没有绘制其他日期
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
推荐答案
因此，在经过反复的错误尝试和建议之后(感谢塞巴斯蒂安和斯克拉姆)，发现了问题所在.
So, after a lots of trial by error and suggestions here and there (Thanks Sebastian and Skram), found what is wrong.
1)您需要转换日期:作为字符串，它们将不起作用，因为Highcharts希望看到以毫秒为单位的日期.除此之外，还必须设置xAxis type: 'datetime'.
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)在其他情况下，您可以将一组值放置在数组中，将另一组值放置在第二个数组中，并将它们作为类别和序列放置；当处理日期时，您需要一个带有(转换后的)日期和相关值的2D数组.
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)您不得将数据分配给类别；否则，您将花费数小时试图弄清楚为什么它不起作用.您只需要在数据中添加2D数组即可:
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在x轴上设置日期并使用时间范围(例如1天)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
