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

Question

如何使用给定“从”和“到”日期值的日期填充x轴？

基本上，用户将在我的HTML Web界面中输入“from”和“to”日期; 例如，24 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);