Highcharts实心规格动态更新

时间：2016-07-04 15:24:39

标签： javascript php 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>

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

2 个答案:

答案 0 :(得分：1)

与此同时，我在@GrzegorzBlachliń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);，但图表不接受这些值，并且没有' t绘制图表，所以我通过回显变量值的正确格式为它做了一个解决方法。

这是我的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）。

再次感谢所有人的帮助。

答案 1 :(得分：0)

图表可能正在重新加载，但您似乎永远不会重新加载$cpu和$mem变量本身。它们也需要刷新，因为一旦它们被分配，它们将继续保持其初始值，直到您专门重新执行它们的exec(...)命令并更新它们。

相关问题
最新问题