实时数据不会加载到HighCharts规格中

时间:2013-05-31 12:24:37

标签: javascript highcharts live gauge

我正在尝试制作一个Gauge图表。 该图表显示80但实时数据不起作用。 我使用以下代码:

$(function () {

var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Speedometer'
        },

        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: 200,

            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: 'km/h'
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]        
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    },
    // Add some life
function (chart) {
    setInterval(function() {
    $(function() {
    $.getJSON("livedata.php", function(data) {
        $.each(data, function(key, val) {
        if (key == 'Gas')
        {
        newVal = val;
        var point = chart.series[0].points[0];
        point.update(newVal);
        }
        });
    });
    }, "json");
}, 3000);
})
});

我的简单测试livesata.php如下:

// Set the JSON header
header("Content-type: text/json");

// The y value is a random number
$x = "Gas";
$y = rand(10, 100);

// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret, JSON_NUMERIC_CHECK);

有人可以告诉我出了什么问题吗? 如何测试函数被调用?
我如何测试livingata已经过去了?

0 个答案:

没有答案