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

Question

如何使用给定"从"和"到"日期值的日期填充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小时的间隔显示？

Answer 1

以下是一些可以帮助您的参考资料.

• Highcharts API xAxis

还创建了一个示例jsfiddle来帮助您开始.

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;?>)
}

基本上,这样做是将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);