Question

这是我的代码：

<?php
$pfstatetext = get_mypfstate();
$cpuusage= cpu_usage();
?>
<script>
var myVar=setInterval(function(){myTimer()},10000);

function myTimer() {
    var ctx2 = document.getElementById("chart-area2").getContext("2d"); 
    var myPie2 = new Chart(ctx2).Pie(pieData2);
}
</script>
<div id="show">
<canvas id="chart-area2" width="300" height="300"/>
</div>

<script>

    var pieData2 = [
            {
                value: <?= $pfstatetext;?>,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red :"
            },
            {
                value: <?= $cpuusage; ?>,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];
window.onload = function(){
            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            var myPie2 = new Chart(ctx2).Pie(pieData2);

        };


 </script>

'$ pfstatetext'和'$ cpuusage'值将自动更改。上面的代码每10秒刷新一次饼图。但是，每次饼图在10秒后刷新时，pieData2的值都会显示饼图，其中包含加载页面时生成的值。

当我重新加载页面时，饼图将使用'$ pfstatetext'和'$ cpuusage'的不同和更新值绘制，并且每次饼图在10秒后刷新时将显示这些相同的值，但不会随着更改而显示'$ pfstatetext'和'$ cpuusage'的值。

那么我必须做出哪些改变，以便每次在10秒后刷新时，饼图会改变'$ pfstatetext'和'$ cpuusage'的值？

Answer 1

这是因为您似乎误解了服务器端代码和客户端代码之间的区别。 PHP将首先在服务器上执行，然后是您的JS代码。如果您希望更改值，则需要生成Ajax调用以获取新值。

第1步。

设置PHP脚本，返回您的＆＃39; $ pfstatetext＆＃39;和＆＃39; $ cpuusage＆＃39;例如，数组或JSON字符串。

第2步。

进行Ajax调用，命中您在步骤1中设置的文件，然后JavaScript（客户端）将可以访问从服务器返回的数据（PHP）。

如果您需要，我可以稍后发布一些代码，但这很简单。祝你好运。

如何使用动态值更新饼图？

1 个答案: