javascript - Highcharts固体规范动态更新

Question

我的想法是用 highcharts 实体仪表显示 CPU 和内存负载，它每隔几秒更新一次，但无论我做什么，它都不会按照我想要的方式运行它，所以它是这样的:

我有这个 php 代码，它为我提供了一个关于 cpu 和内存使用情况的整数

$cpu = exec("mpstat 1 1 | grep 'all' | awk '{print 100 - $12}' | head -n 1");
$mem = exec("free -m | grep Mem | awk '{print $3 / $2 * 100}'");

这是我的 highcharts js 脚本:

$(function () {

var gaugeOptions = {

    chart: {
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '105%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background3) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 400,
        tickWidth: 0,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                // y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};setTimeout(function () {
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'CPU'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'CPU',
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:18px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#CECECE') + '">{y:.1f} %</span><br/>' +
                   '<span style="font-size:12px;color:silver"></span></div>'
        },
    }]

}));

$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'RAM'
        }
    },

    series: [{
        name: 'RAM',
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:20px;font-family:Arial;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#CECECE') + '">{y:.1f}%</span><br/>' +
                   '<span style="font-size:12px;color:silver"></span></div>'
        },
    }]

}));
    var chart = $('#container-speed').highcharts(),
        point,
        newVal,
        inc;

    if (chart) {
        point = chart.series[0].points[0];
        inc = <?php echo $cpu; ?>;
        newVal = inc;

        if (newVal < 0 || newVal > 200) {
            newVal = point.y - inc;
        }

        point.update(newVal);
    }

    chart = $('#container-rpm').highcharts();
    if (chart) {
        point = chart.series[0].points[0];
        inc = <?php echo $mem; ?>;
        newVal = inc;

        if (newVal < 0 || newVal > 5) {
            newVal = point.y - inc;
        }

        point.update(newVal);
    }   }, 5000);});

...这是我用于调用仪表的容器:

<div style="width: 600px; height: 400px; margin: 0 auto" >
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div></div>

现在，问题是当它刷新时，它在每次刷新时都会给我相同的值。提前感谢大家。

Answer 1

与此同时，我在@Grzegorz Blachliński 评论的帮助下成功解决了我的问题，所以这里是:

首先，我的 php 代码只不过是两个检查 cpu 负载和内存使用情况的变量。

<?php
$cpu = exec("mpstat 1 1 | grep 'all' | awk '{print 100 - $12}' | head -n 1");

$mem = exec("free -m | grep Mem | awk '{print $3 / $2 * 100}'");

echo "[$cpu,$mem]";?>

现在，由于某种原因 json_encode($cpu,$mem); 返回引号内的值，我可以使用例如 alert(mem) 将它们读取为整数;，但图表不接受这些值并且没有绘制图表，因此我通过回显变量值的正确格式来解决它。

这是我的 JavaScript 文件:

function setDivHeight() {
var div = $('#cpu-meter');
div.height(div.width() * 0.75);
div = $('#memory-meter');
div.height(div.width() * 0.75); } $(function () {

if( $(window).width() < 1000){
    setDivHeight();

$(window).on('load resize', function(){
    setDivHeight();        
});

}  


var gaugeOptions = {

    chart: {
        type: 'solidgauge',
        events: {
            load: requestData
        }
    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 400,
        tickWidth: 0,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

$('#cpu-meter').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'CPU Usage'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:20px;font-family:Arial;color:#777;">{y:.2f} %</span><br/>'
        },
    }]

}));

$('#memory-meter').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'Memory Usage'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:20px;font-family:Arial;color:#777;">{y:.2f} %</span><br/>'
        },
    }]

}));

function requestData() {
    $.ajax({
        url: 'core/cpu-data.php',
        type: "GET",
        dataType:"json",
        success: function(load) {
            var chart = $('#cpu-meter').highcharts(),
                point = 0,
                newVal = 0,
                inc = 0;

                point = chart.series[0].points[0];
                inc = load[0];

                diff = newVal - inc;

                if (diff > 0) {
                    newVal = newVal + diff;
                } else {
                    newVal = newVal - diff;
                }

                point.update(newVal);


                chart = $('#memory-meter').highcharts(),
                point = 0,
                newVal = 0,
                inc = 0;

                point = chart.series[0].points[0];
                inc = load[1];

                diff = newVal - inc;

                if (diff > 0) {
                    newVal = newVal + diff;
                } else {
                    newVal = newVal - diff;
                }

                point.update(newVal);

                setTimeout(requestData, 3000);
            },
        cache: false
    });
}});

如您所见，ajax 正在从我的 php 文件获取数据，并使仪表增加和减少 setTimeout 值(不要使用 setInterval)。

再次感谢大家的帮助。