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

How to update pie chart with dynamic values?

本文关键字：更新 何使用 动态      更新时间：2023-09-26

这是我的代码:

<?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秒刷新一次饼状图。但是，pieData2的值在每次饼图在10秒后刷新时显示带有值的饼图，这些值是在加载页面时生成的。

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

所以我要做什么改变，以便改变'$pfstatetext'和'$cpuusage'的值将采取饼状图每次刷新后10秒?

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

步骤1

。

设置PHP脚本，返回你的'$pfstatetext'和'$cpuusage'的值说，一个数组或JSON字符串。

步骤2

。

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

我可以张贴一些代码以后如果你需要，但它是相当直接的。好运。

相关文章：