2013-04-29 81 views
-2

我在我的管理面板上工作,並且遇到了問題。我正在使用一個輸出我的服務器CPU使用率的小腳本,我想將它集成到一個javascript圖表中。我無法得到它的工作.. 我想知道如何在JavaScript圖表中進行變量工作。將PHP變量與jQuery/Javascript結合起來

我的PHP:

<?php 

$stat1 = file('/proc/stat'); 
sleep(1); 
$stat2 = file('/proc/stat'); 
$info1 = explode(" ", preg_replace("!cpu +!", "", $stat1[0])); 
$info2 = explode(" ", preg_replace("!cpu +!", "", $stat2[0])); 
$dif = array(); 
$dif['user'] = $info2[0] - $info1[0]; 
$dif['nice'] = $info2[1] - $info1[1]; 
$dif['sys'] = $info2[2] - $info1[2]; 
$dif['idle'] = $info2[3] - $info1[3]; 
$total = array_sum($dif); 
$cpu = array(); 
foreach($dif as $x=>$y) $cpu[$x] = round($y/$total * 100, 1); 
$usedcpu = $cpu['user'] + $cpu['nice'] + $cpu['sys']; 

?> 

而且我的javascript

<script> 
    $(document).ready(function() { 

     // Demo #1 
     // we use an inline data source in the example, usually data would be fetched from a server 
     var data = "<?php echo $usedcpu; ?>"; 
     function getData() { 
      return data; 
     } 

     // setup control widget 
     var updateInterval = 30; 
     $("#updateInterval").val(updateInterval).change(function() { 
      var v = $(this).val(); 
      if (v && !isNaN(+v)) { 
       updateInterval = +v; 
      if (updateInterval < 1) 
       updateInterval = 1; 
      if (updateInterval > 2000) 
       updateInterval = 2000; 
      $(this).val("" + updateInterval); 
      } 
     }); 

     // setup plot 
     var options = { 
      series: { 
       shadowSize: 0, 
       color: '#c0382b', 
       lines: { 
        fill: true 
       } 
      }, // drawing is faster without shadows 
      yaxis: { min: 0, max: 10 }, 
      xaxis: { show: false }, 
      grid: { backgroundColor: '#ffffff', borderColor: 'transparent' }, 
     }; 
     var plot = $.plot($("#demo-1"), [ getData() ], options); 

     function update() { 
      plot.setData([ getData() ]); 
      // since the axes don't change, we don't need to call plot.setupGrid() 
      plot.draw(); 
      setTimeout(update, updateInterval); 
     } 

     update(); 

    }); 
</script> 

我希望你們能幫助我,在此先感謝!

+0

問題是什麼? – Jon 2013-04-29 23:25:53

+0

很抱歉,如果不是很清楚,我想讓圖表中的variabe $ usedcpu工作 – wouterdz 2013-04-29 23:27:08

+0

'和我的jQuery'如果在頁面中包含'jquery.js',那麼您的javascript不會變成_jquery_並且它應該被稱爲JavaScript的。 – Ejaz 2013-04-29 23:27:50

回答

1

您可以使用PHP編寫JS,但不能使用其他方法。 PHP是服務器端,JS是客戶端。

您可以通過讓PHP構建javascript來將.php文件用作'javascript文件'。

當然,你將不得不把它包裝在<script>區塊並通過php包含它。

<script type="text/javascript"> 
//Stuff 
<?php 
    $someVar = 'some string'; 
    echo "var jsVariable = '{$someVar}';"; 
?> 
//more stuff 
</script> 

雖然這是相當複雜,可以得到凌亂快。爲什麼不使用PHP創建JSON並使用JS解釋?

+0

我做了一個變量稱爲數據在Javascript中,我想我做了它像你告訴我,但如果我想添加它的情節(JavaScript)它沒有工作。 – wouterdz 2013-04-29 23:47:33

1

我會建議將您的值從PHP放入一個隱藏的HTML字段與唯一的ID。然後在您的JavaScript中,您可以獲取該值。只是一種做法。

+0

但我現在做的方式是不正確的?只需將PHP變量放入js中? – wouterdz 2013-04-29 23:57:57

+0

嗯,我從來沒有這樣做過,所以我不能肯定地說。但最好將你的javascript和php代碼分離成單獨的文件。這將是最佳實踐,更容易重用代碼並修復可能出現的任何問題 – Yeak 2013-04-30 23:48:28

1

由於$usedcpu是您想要在圖中使用的數字,因此不希望JavaScript var中的引號出現。下面將創建一個名爲usedcpu一個javascript變量,你可以在劇情代碼中使用:

<script type="text/javascript"> 
    <php? 
     echo "var usedcpu = " . $usedcpu . ";" 
    ?> 
</script>