填充Highcharts X轴与日期给定从和到目前为止

时间:2011-08-21 17:20:48

标签: php javascript jquery html highcharts

如何使用给定'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小时的间隔显示?

1 个答案:

答案 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);