2015-10-19 142 views
0

我正在嘗試創建一個谷歌圖表,以顯示不同時間段內過程的資源使用情況。我導入了不同的CSV文件到服務器,然後使用PHP讀取它,這裏的php文件:在PHP中更改變量,但JavaScript中的變量不變

//PHPVar.php 
    <?php 
    class chartData 
    { 
     var $length; 
     var $catagories; 
     var $elements = array(); 
     var $numFiles; 
     var $allFiles;  
     function startUp($input = 5) 
     { 
      $dir = "CSV"; 
      $this->allFiles = scandir($dir,1); 
      $this->numFiles = count($this->allFiles) - 2;    

      $currentDir = $input;   
      $filePath = $dir; 
      $filePath .= "/"; 
      $filePath .= $this->allFiles[intval($currentDir)]; 

      $file = fopen($filePath,"r"); 
      $this->elements=array(fgetcsv($file)); 

      while(! feof($file) 
       $this->elements[]=fgetcsv($file);     

      $this->length=count($this->elements);    
      $this->catagories=count($this->elements[0]);     
     } 
    } 
    $data = new chartData; 
    //If there's a parameter input from AJAX then call startup to 
    //refill the elements list 
    if(isset($_POST['fileNumber'])) 
     $data->startUp($_POST['fileNumber']); 
    //Else call startup with default parameter 
    else 
     $data->startUp(); 
    ?> 

讓我存儲我的所有CSV文件的目錄被稱爲CSV,因此,如果沒有輸入到startup(),默認情況下它會指定一個文件,並將文件中的所有值存儲到一個名爲elements [] []的數組中。我首先創建一個chartData對象並檢查是否有輸入,如果不是,那麼這意味着這是第一次調用。在我的網頁中,我有一個下拉菜單,它顯示CSV目錄中的所有文件,並且我希望它能夠使用我選擇的csv文件中的值刷新圖形。下面是我用來傳輸數據(文件,我選擇)從javascript傳送給PHP代碼:

function changeFile(str) { 
       $.ajax({ 
        url: 'PHPVar.php', 
        type: 'POST', 
        data: {fileNumber:str}, 
        success: function(data) {console.log(data);} 
        });      
       chart.clearChart(); 
       drawChart(); 
      } 

所以最終在下拉菜單中的每個條目調用此函數應該再次運行PHPVar.php刷新值。生成的第一張圖很好,問題在於當我試圖將csv文件更改爲繪圖時。似乎我在javascript中看到的php變量沒有改變,而PHPVar.php中的php變量是。我已經通過向控制檯輸出一些變量的值來驗證這一點,並且PHPVar.php中的變量確實隨着來自下拉菜單的每次調用而改變,但似乎無論我在哪裏使用JavaScript記錄相同的變量,值仍然是與我第一次啓動網站時一樣,無論我從下拉菜單調用具有不同值的功能多少次。在我畫我用

<?php include 'PHPVar.php' ?> 

會不會是包括僅使PHPVar.php的副本和圖形文件,以便當我去改變變量我真的改變它PHPVar而由include創建的同名變量保持不變?任何答案/建議表示讚賞。下面是js函數:

  google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      var data; 
      var options; 
      var time; 
      var row; 
      var selected = 1; 
      var average = 0; 
      var max = 0; 
      var index; 
      var size; 
      var chart; 

      function drawChart() { 
       average = 0; 
       max = 0; 
       data = new google.visualization.DataTable(); 
       var testArray = null; 
       testArray = [];    
       <?php 
       //Export data from php server into javascript array *VERY SENSITIVE, make backup before changing* 

       for($i=0;$i<$data->length-1;$i++) 
       { 
       ?>    
        testArray[<?php echo $i; ?>] = []; 
        <?php 

        for($j=0;$j<$data->catagories;$j++) 
        { 
        ?> 
         <?php 
         if($j == 0 && $i != 0) 
         { 
          $timeStamp = array(); 
          $time = preg_split('/-/', $data->elements[$i][0]); 

          $timeStamp = array(2015,(int)$time[0],(int)$time[1],(int)$time[2],(int)$time[3],(int)$time[4]); 

          ?> 

          testArray[<?php echo $i; ?>][<?php echo $j; ?>] = <?php echo json_encode($timeStamp,JSON_NUMERIC_CHECK); ?>; 

         <?php 
         } else if($i == 0) 
         { 
         ?> 
          testArray[<?php echo $i; ?>][<?php echo $j; ?>] = '<?php echo $data->elements[$i][$j]; ?>'; 
         <?php 
         } else 
         { 
         ?> 
          testArray[<?php echo $i; ?>][<?php echo $j; ?>] = <?php echo (int)$data->elements[$i][$j]; ?>; 
         <?php 
         } 
        } 
       } 
       ?> 
       // Declare columns 
       row = testArray[0][selected]; 
       time = testArray[0][0]; 
       data.addColumn('datetime', time); 
       data.addColumn('number', row); 
       //alert(String(testArray[1][0][1])); 
       for(index=1;index<<?php echo $data->length-1; ?>;index++) 
       { 
        data.addRow([new Date(testArray[index][0][0], 
         testArray[index][0][1], 
         testArray[index][0][2], 
         testArray[index][0][3], 
         testArray[index][0][4], 
         testArray[index][0][5]), testArray[index][selected]]); 
        average += testArray[index][selected]; 
        if(testArray[index][selected] > max) 
         max = testArray[index][selected]; 
       } 
       average = average/<?php echo $data->length-1; ?>; 
       var options = { 
        width: 900, 
        height: 500, 
        title: row, 
        hAxis: { 
         title: 'Time', 
         viewWindow: { 
         min: new Date(testArray[1][0][0], 
         testArray[1][0][1], 
         testArray[1][0][2], 
         testArray[1][0][3], 
         testArray[1][0][4], 
         testArray[1][0][5]),//testArray[1][0]), 
         max: new Date(testArray[<?php echo $data->length-2; ?>][0][0], 
         testArray[<?php echo $data->length-2; ?>][0][1], 
         testArray[<?php echo $data->length-2; ?>][0][2], 
         testArray[<?php echo $data->length-2; ?>][0][3], 
         testArray[<?php echo $data->length-2; ?>][0][4], 
         testArray[<?php echo $data->length-2; ?>][0][5]) 
         }, 
         gridlines: 
         { 
          count: -1, 
          units: 
          { 
           days: {format: ['MMM dd']}, 
           hours: {format: ['HH:mm', 'ha']} 
          } 
         }, 
         minorGridlines: 
         { 
          units: 
          { 
          hours: {format: ['hh:mm:ss a', 'ha']}, 
          minutes: {format: ['HH:mm a Z', ':mm']} 
          } 
         } 
        }, 
        vAxis: { 
         title: 'Resource' 
        }, 
        backgroundColor: '#f1f8e9' 
       }; 

       chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

       chart.draw(data, options); 
       document.getElementById('Average').innerHTML = "Mean Resource Usage: "+ average; 
       document.getElementById('Max').innerHTML = "Max Resource Usage: "+ max; 

      } 
+0

這是'PHPVar.php'文件的完整內容嗎?你正在向它發出一個AJAX請求,但似乎沒有用PHP發送任何響應。 – Andy

+0

你好泰德。這是對http請求響應週期的誤解 - 即時猜測javascript函數'drawChart'依賴於直接從php打印到js中的變量。初始頁面加載後,這些變量永遠不會改變。取而代之的是函數除了參數需要的變量,然後從ajax響應中傳遞它們,例如'drawChart(data.graphdata)'。當然,你將不得不修改你的php來返回這個數據 – Steve

+0

如果你也顯示你的js代碼,或許我可以幫助你 – Steve

回答

0

我認爲這個問題可能是您的jQuery的AJAX調用:

$.ajax({ 
    url: 'PHPVar.php', 
    type: 'POST', 
    data: {fileNumber:str}, 
    success: function(data) {console.log(data);} 
});  

默認情況下,jQuery的阿賈克斯()是緩存的結果。

所以你可能要在默認情況下禁用緩存,做喜歡的事:在你的初始化JS代碼之前

$.ajaxSetup({ cache: false }); 

地方。

+1

我很懷疑這個問題,更有可能它的OP沒有對返回的數據做任何事情,而是期待他的js中硬編碼的php變量被更新 – Steve

+0

@Steve ...我不確定..我理解你的觀點..但我們錯過了其餘的代碼,以確保..我是說關於jQuery緩存,因爲他說,最初它是第一次工作,那麼它不是... – dwarfy

+0

真的,我只是猜測 - 我的理論是「第一次」是初始頁面加載,當php變量將被注入到js中。 – Steve