如何將數據從PHP數組傳遞到Javascript來構建圖表

Question

所以我目前正在使用Morris.JS和PHP構建一個簡單的區域圖表。

我有我的PHP數組，它吐出我想要的所有數據，並且我還有一個簡單的圖表演示。從這個意義上說，一切運作良好。

現在要做的唯一任務就是將PHP數組數據綁定到Javascript中，以將實際數據傳遞到圖表中。正如你所看到的，我需要將3個值傳入圖表（期間，讀取和讀取）。未讀和閱讀很清楚，並且在此期間，如果可能的話，我希望在一天之內分割它

爲了讓事情變得簡單 - 我將所有PHP，Javascript和標記包括在同一頁面上 - 但當然我的目標是最終通過AJAX或其他方式傳遞數據，我只是試圖弄清楚如何將數組數據放入Javascript中。

如何生成$lifeSpanArray陣列：

$params = array(
        'state' => 'all', 
        'sort' => 'newest', 
        'detailType' => 'simple' 
       ); 

      $items = $pocket->retrieve($params, $accessToken); 

      $lifeSpanArray = array(); 


      foreach ($items['list'] as $key) { 

       $timeAdded = date('m/d/Y', $key["time_added"]); 

       if ($key["status"] == 1) { 
        $hasRead++; 

        $dateRead = date('m/d/Y', $key["time_read"]); 

        //Push into lifespan array 
        $lifeSpanArray[] = array('timeAdded' => $timeAdded,'timeRead' => $dateRead); 

       } 
       else { 
        $hasNotRead++; 
       } 

      } 

數組的一個簡單的var_dump：

Array 
(
    [0] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [1] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [2] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [3] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [4] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [5] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [6] => Array 
     (
      [timeAdded] => 07/15/2014 
      [timeRead] => 07/15/2014 
     ) 

    [7] => Array 
     (
      [timeAdded] => 07/14/2014 
      [timeRead] => 07/14/2014 
     ) 

    [8] => Array 
     (
      [timeAdded] => 07/13/2014 
      [timeRead] => 07/15/2014 
     ) 

    [9] => Array 
     (
      [timeAdded] => 07/13/2014 
      [timeRead] => 07/13/2014 
     ) 

    [10] => Array 
     (
      [timeAdded] => 07/12/2014 
      [timeRead] => 07/15/2014 
     ) 

    [11] => Array 
     (
      [timeAdded] => 07/12/2014 
      [timeRead] => 07/12/2014 
     ) 

    [12] => Array 
     (
      [timeAdded] => 07/12/2014 
      [timeRead] => 07/12/2014 
     ) 

    [13] => Array 
     (
      [timeAdded] => 07/12/2014 
      [timeRead] => 07/12/2014 
     ) 

    [14] => Array 
     (
      [timeAdded] => 07/12/2014 
      [timeRead] => 07/12/2014 
     ) 

    [15] => Array 
     (
      [timeAdded] => 07/12/2014 
      [timeRead] => 07/12/2014 
     ) 

    [16] => Array 
     (
      [timeAdded] => 07/11/2014 
      [timeRead] => 07/11/2014 
     ) 

    [17] => Array 
     (
      [timeAdded] => 07/11/2014 
      [timeRead] => 07/11/2014 
     ) 

    [18] => Array 
     (
      [timeAdded] => 07/10/2014 
      [timeRead] => 07/11/2014 
     ) 

    [19] => Array 
     (
      [timeAdded] => 07/10/2014 
      [timeRead] => 07/10/2014 
     ) 

    [20] => Array 
     (
      [timeAdded] => 07/09/2014 
      [timeRead] => 07/09/2014 
     ) 
) 

然後JavaScript的：

$(function() { 
     Morris.Area({ 
      element: 'morris-area-chart', 
      data: [{ 
       period: '2010 Q1', 
       read: 50, 
       added: 100 
      }, { 
       period: '2010 Q2', 
       read: 240, 
       added: 400 
      }, { 
       period: '2010 Q3', 
       read: 30, 
       added: 15 
      }, { 
       period: '2010 Q4', 
       read: 30, 
       added: 100 
      }], 
      xkey: 'period', 
      ykeys: ['read', 'added'], 
      labels: ['Read', 'Added'], 
      pointSize: 2, 
      hideHover: 'auto', 
      resize: true 
     }); 
}); 

Answer 1

您可以使用json編碼。隨着一切都在一個頁面上：

Morris.Area({ 
     element: 'morris-area-chart', 
     data: <?php echo json_encode($lifeSpanArray);?>, 
     xkey: 'period', 
     ykeys: ['read', 'added'], 
     labels: ['Read', 'Added'], 
     pointSize: 2, 
     hideHover: 'auto', 
     resize: true 
    }); 

如果你在哪裏獨立這一點到seperare文件，你可以從JS調用訪問getdata.php，這樣的事情：

//getdata.php 

$lifeSpanArray = array();//your code for generating array goes here 

//remember to set correct content type 
header('Content-Type: application/json'); 
echo json_encode($lifeSpanArray); 
die(); 

//js 

$.get("getdata.php", function(json) { 
    Morris.Area({ 
     element: 'morris-area-chart', 
     data: json, 
     xkey: 'period', 
     ykeys: ['read', 'added'], 
     labels: ['Read', 'Added'], 
     pointSize: 2, 
     hideHover: 'auto', 
     resize: true 
    }); 
});