0

我正在尝试使用 highcharts 创建一个 CPU 仪表图。我有 php 脚本，我想每 5 秒调用一次以获取输出并在 gaug 上显示数据：

ajax函数如下：

  function request_cpu_Data() {
    $.ajax({
        url: 'get_cpu.php', 
        success: function(point) {
            var myObj = JSON.parse(point); 

                                  //This is the data part
                                   var myDate=myObj[0]
                                  //This is the CPU value
            var myData=myObj[1];
            cpu_chart.addSeries({ data: myData });
            setTimeout(request_cpu_Data, 300000); 
        },
        cache: false
    });
}

get_cpu.php 脚本的输出如下所示：

[1371048443000,46]

这是创建量规高图的函数：

$(document).ready(function() {
    cpu_chart = new Highcharts.Chart({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            renderTo: 'container',
            plotShadow: false,
            events: {
                load: request_cpu_Data
            }
        },

        title: {
            text: 'Profile DB'
        },
         credits: {
                        enabled: false
        },
        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'CPU'
            },
            plotBands: [{
                from: 0,
                to: 65,
                color: '#55BF3B' // green
            }, {
                from: 65,
                to: 75,
                color: '#DDDF0D' // yellow
            }, {
                from: 75,
                to: 100,
                color: '#DF5353' // red
            }]        
        },
        series: [{
            name: 'CPU',
            data: [],
            tooltip: {
                valueSuffix: '%'
            }
        }]
    });
});

当我这样做时，这个仪表图没有显示任何数据。有人可以告诉我我在这里可能缺少什么吗？我也喜欢在仪表中显示 myDate 。

4

2 回答 2

1

我解决了这个问题。有我修改后的功能：

function request_cpu_Data() {
    $.ajax({
        url: 'get_cpu.php', 
        success: function(data) {
        var myObj = JSON.parse(data); 
        var point = cpu_chart.series[0].points[0];
        var newVal=myObj[1];
        //alert(newVal);
        point.update(newVal);
        setTimeout(request_cpu_Data, 10000000); 
        },
        cache: false
    });
}

我也开始将我的数据初始化为 0：

series: [{
            name: 'CPU',
            data: [0],

},

于 2013-06-12T19:23:32.790 回答
0

像这样的东西应该工作：

Chart.addSeries({ data: fromGetCpu[1] });

如果您愿意，还有一个名称参数：

Chart.addSeries({ name: 'yourName', data: fromGetCpu[1] });
于 2013-06-12T15:34:54.750 回答