如何使用给定'from'和'to'日期值的日期填充x轴?
基本上,用户将在我的HTML Web界面中输入“from”和“to”日期;例如,24/08/2011 - 28/08/2011
这将通过HTML文本字段显示,当用户按下“查看图表”按钮时,使用jQuery捕获其值。
我想创建一个样条图表,其x轴在“from”日期前2天开始,并在“to”日期后2天结束。
因此,在上面的示例中,用户提供:
from -> 24/08/2011
to -> 28/08/2011
因此
x-axis start -> 22/08/2011
x-axis ends -> 30/08/2011
我还希望将24小时间隔显示为相应的日期。因此,x轴应如下所示:
|
|
|
|
|
|
|
|
|
|
|
|
|
|___________________________________________________
| | | | | | | | |
22/08 23/08 24/08 25/08 26/08 27/08 28/08 29/08 30/08
编辑:
我找到了以下代码:
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
]
}]
但我无法弄清楚HighCharts如何将时间间隔等同于数据部分..我明白它与pointInterval有关...
我可以猜测24 * 3600是一天中的秒数,但* 10是多少?如何让它以24小时的间隔显示?
答案 0 :(得分:10)
以下是一些可以帮助您的参考资料。
还创建了一个示例jsfiddle来帮助您开始。
<强> XAXIS 强>
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;?>)
}
基本上,这样做是将xAxis的类型设置为'datetime',以便tickInterval
了解它是按86400000 milliseconds
递增的,并且还根据所需的{设置xAxis的格式} {3}}。
然后$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);