填充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);