javascript 用给定的日期填充 Highcharts X 轴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7139819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate Highcharts X-Axis With Dates Given a From And To Date
提问by user559142
How it is possible to populate the x axis with dates given a 'from' and 'to' date values?
如何用给定“从”和“到”日期值的日期填充 x 轴？
Essentially, the user will enter a "from" and "to" date in my HTML web interface; for example, 24/08/2011 - 28/08/2011
本质上，用户将在我的 HTML 网络界面中输入“从”和“到”日期；例如，24/08/2011 - 28/08/2011
This will be via HTML textfields whose values are caught using jQuery when a user presses a "View Graph" button.
这将通过 HTML 文本字段实现，当用户按下“查看图表”按钮时，这些文本字段的值会使用 jQuery 捕获。
I would like to create a spline chart whose x-axis starts 2 days before the "from" date and ends 2 days after the "to" date.
我想创建一个样条图，其 x 轴在“开始”日期前 2 天开始，在“到”日期后 2 天结束。
So in the example above, user provides:
所以在上面的例子中，用户提供：
from -> 24/08/2011
to -> 28/08/2011
therefore
所以
x-axis start -> 22/08/2011
x-axis ends -> 30/08/2011
I also want it to have 24 hour intervals displayed as their corresponding dates. The x-axis should therefore look something like this:
我还希望它将 24 小时间隔显示为相应的日期。因此，x 轴应如下所示：
|
|
|
|
|
|
|
|
|
|
|
|
|
|___________________________________________________
| | | | | | | | |
22/08 23/08 24/08 25/08 26/08 27/08 28/08 29/08 30/08
EDIT:
编辑：
I found the following code:
我找到了以下代码：
series: [{
type: 'spline',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 10,
pointStart: Date.UTC(<?php echo($year); ?>, 0, <?php echo($day);?>),
data: [
0.8446, 0.8445, 0.8444
]
}]
But I just cannot figure out how HighCharts equates time intervals to the parts of data..I know obviously it has to do with pointInterval...
但我就是无法弄清楚 HighCharts 如何将时间间隔与数据部分等同起来……我知道这显然与 pointInterval 有关……
I can guess that 24 * 3600 is the number of seconds in a day but what is the * 10? How do I get it to display exactly 24 hour intervals?
我可以猜到 24 * 3600 是一天中的秒数，但 * 10 是多少？如何让它准确显示 24 小时间隔？
回答by ace
Here are some references that should help you out.
这里有一些参考资料可以帮助你。
Also created a sample jsfiddleto help you start out.
还创建了一个示例jsfiddle来帮助您开始。
xAxis
x轴
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%m-%d'
},
tickInterval: 24 * 3600 * 1000,
min: Date.UTC(<?php echo $date_from;?>),
max: Date.UTC(<?php echo $date_to;?>)
}
Basically, what this does is set the type of xAxis to 'datetime' so the tickIntervalunderstands that's it is incrementing by 86400000 milliseconds, and also set the format of the xAxis based on the required date format.
Then the $date_fromand $date_toshould look like this from PHPhandling the form submission.
基本上，这样做是将 xAxis 的类型设置为 'datetime' 以便tickInterval理解它正在递增86400000 milliseconds，并且还根据所需的日期格式设置 xAxis 的格式。
然后，从处理表单提交来看，$date_from和$date_to应该是这样的PHP。
$date_from = date("Y, m, d",strtotime($_POST['from']) - 2*86400);
$date_to = date("Y, m, d",strtotime($_POST['to']) + 2*86400);
