Question

我在我的管理面板上工作，我遇到了问题。我使用一个小脚本输出我的服务器CPU使用情况，我想将其集成到一个javascript图表中。我不能让它工作.. 我想知道如何使变量在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>

我希望你们能帮助我，提前谢谢！

Answer 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解释？

Answer 2

我建议将您的值从php放入一个带有唯一ID的隐藏html字段。然后在您的JavaScript中，您可以获取该值。这只是一种方式。

Answer 3

由于$usedcpu是您要在图中使用的数字，因此您不希望javascript var中的引号。以下将创建一个名为usedcpu的javascript变量，您可以在绘图代码中使用该变量：

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

将PHP变量与jQuery / Javascript结合使用

3 个答案: