Javascript Highcharts gauge在json获取数据之前呈现

我遇到了一个奇怪的问题。我有一个带有2个highcharts gauge的模块，正在使用json从php脚本检索数据。json看起来像

[{“PID”：“1019”，“日期”：“15-10-2014”，“时间”：“02:52:36”，“温度”：“31”，“湿度”：“65”}]

1） 问题是，在重试数据的第一次迭代过程中，数据不会反映在模块中。
2） 在数据的第二次迭代过程中，数据由模块显示，但没有颜色高亮显示，
3） 在第三次迭代过程中，模块将以颜色高亮显示数据。

我认为问题在于json的异步行为。但我不确定，我是网络编程的新手。 我的javascript如下所示

var point, temperature, humidity, pressure, windspeed, winddirection, light, rainfall, elevation, lat, lang, bvolt, bcurrent, svolt, scurrent, temp;
$.getJSON("http://openweather.in/localpublish/livedata.php", function(data) {
            console.log(data);
            temperature = parseFloat(data[0].Temperature);
            humidity = parseFloat(data[0].Humidity);
            pressure = parseFloat(data[0].Pressure);
            windspeed = parseFloat(data[0].Windspeed);
            winddirection = parseFloat(data[0].Winddirection);
            light = parseFloat(data[0].Light);
            rainfall = parseFloat(data[0].Rainfall);
            elevation = parseFloat(data[0].Elevation);
            lat = parseFloat(data[0].Lat);
            lang = parseFloat(data[0].Lang);
            bvolt = parseFloat(data[0].Bvolt);
            bcurrent = parseFloat(data[0].Bcurrent);
            svolt = parseFloat(data[0].Svolt);
            scurrent = parseFloat(data[0].Scurrent);
        });

 $(document).ready(function () {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '75%'],
            size: '120%',
            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: {
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }        
        },

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

    // The Temperature gauge
    $('#container-temperature').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
                stops: [
            [1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.75, '#DF5353'] // red
            ],
            min: 0,
            max: 50     
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Temperature',
            data: [parseFloat(temperature)],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:20px;color:' + 
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + 
                    '<span style="font-size:12px;color:silver">°C</span></div>'
            },
            tooltip: {
                valueSuffix: '°C'
            }
        }]

    }));

    // The Humidity gauge
    $('#container-humidity').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
                stops: [
            [1, '#55BF3B'], // green
                [0.55, '#DDDF0D'], // yellow
                [0.8, '#DF5353'] // red
            ],
            min: 0,
            max: 100
            },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Humidity',
            data: [parseFloat(humidity)],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:20px;color:' + 
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' + 
                    '<span style="font-size:12px;color:silver">%rh</span></div>'
            },
            tooltip: {
                valueSuffix: '%rh'
            }      
        }]
    }));

    // The atmospheric pressure gauge
    $('#container-pressure').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
                stops: [
            [1, '#55BF3B'], // green
                [0.55, '#DF5353'] // red
            ],
            min: 0,
            max: 20
            },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Atmospheric Pressure',
            data: [parseFloat(pressure)],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:20px;color:' + 
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' + 
                    '<span style="font-size:12px;color:silver">* 100 hbar</span></div>'
            },
            tooltip: {
                valueSuffix: 'hpa'
            }      
        }]
    }));
        setInterval(function () {

    $.getJSON("http://openweather.in/localpublish/livedata.php", function(data) {
            console.log(data);
            temperature = data[0].Temperature;
            humidity = data[0].Humidity;
            pressure = data[0].Pressure;
            windspeed = data[0].Windspeed;
            winddirection = data[0].Winddirection;
            light = data[0].Light;
            rainfall = data[0].Rainfall;
            elevation = data[0].Elevation;
            lat = data[0].Lat;
            lang = data[0].Lang;
            bvolt = data[0].Bvolt;
            bcurrent = data[0].Bcurrent;
            svolt = data[0].Svolt;
            scurrent = data[0].Scurrent;
        });

    point = $('#container-temperature').highcharts().series[0].points[0];    
    point.update(parseFloat(temperature));

    point = $('#container-humidity').highcharts().series[0].points[0];       
    point.update(parseFloat(humidity));

    point = $('#container-pressure').highcharts().series[0].points[0];       
    point.update(parseFloat(pressure));
/*  
    point = $('#container-windspeed').highcharts().series[0].points[0];       
    point.update(windspeed);

    point = $('#container-winddirection').highcharts().series[0].points[0];       
    point.update(winddirection);

    point = $('#container-light').highcharts().series[0].points[0];       
    point.update(light);

    point = $('#container-rainfall').highcharts().series[0].points[0];       
    point.update(rainfall);

    point = $('#container-elevation').highcharts().series[0].points[0];       
    point.update(elevation);

    point = $('#').highcharts().series[0].points[0];       
    point.update(humidity);

    temp = bvolt + ' V';
    $('#disp-batteryV').val(temp);

    temp = bcurrent + ' mA';
    $('#disp-batteryC').val(temp);

    temp = svolt + ' V';
    $('#disp-solarV').val(temp);

    temp = scurrent + ' mA';
    $('#disp-solarC').val(temp);
*/    
}, 1*60*1000);  
});

var点、温度、湿度、压力、风速、风向、光线、降雨量、海拔、纬度、朗度、bvolt、B电流、svolt、SCURENT、温度；
$.getJSON（“http://openweather.in/localpublish/livedata.php，函数（数据）{
控制台日志（数据）；
温度=浮点（数据[0]。温度）；
湿度=0（数据[0]。湿度）；
压力=浮动（数据[0]。压力）；
风速=解析浮点（数据[0]。风速）；
winddirection=parseFloat（数据[0]。winddirection）；
light=parseFloat（数据[0]。light）；
降雨量=降雨量（数据[0]。降雨量）；
高程=parseFloat（数据[0]。高程）；
lat=parseFloat（数据[0].lat）；
lang=parseFloat（数据[0].lang）；
bvolt=parseFloat（数据[0].bvolt）；
bcurrent=parseFloat（数据[0].bcurrent）；
svolt=parseFloat（数据[0].svolt）；
scurrent=parseFloat（数据[0].scurrent）；
});
$（文档）.ready（函数（）{
var计量选项={
图表：{
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['50%，'75%']，
大小：“120%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
//价值轴
亚克斯：{
线宽：0，
minorTickInterval:null，
像素间隔：400，
宽度：0，
标题：{
y:-70
},
标签：{
y:16
}        
},
打印选项：{
solidgauge：{
数据标签：{
y:-30，
边框宽度：0，
useHTML:true
}
}
}
};
//温度计
$（“#容器温度”）.highcharts（highcharts.merge（gaugeOptions{
亚克斯：{
停止：[
[1，#55BF3B']，//绿色
[0.5，#DDDF0D']，//黄色
[0.75，#DF5353']//红色
],
分:0,，
最高：50
},
学分：{
已启用：false
},
系列：[{
名称：“温度”，
数据：[浮子（温度）]，
数据标签：{
格式：'{y}
'+
“摄氏度”
},
工具提示：{
valueSuffix:“°C”
}
}]
}));
//湿度计
$（“#容器湿度”）.highcharts（highcharts.merge（gaugeOptions{
亚克斯：{
停止：[
[1，#55BF3B']，//绿色
[0.55，#DDDF0D']，//黄色
[0.8，#DF5353']//红色
],
分:0,，
最高：100
},
学分：{
已启用：false
},
系列：[{
名称：“湿度”，
数据：[浮子（湿度）]，
数据标签：{
格式：'{y:.1f}
'+
“%rh”
},
工具提示：{
valueSuffix:“%rh”
}      
}]
}));
//大气压计
$（“#容器压力”）.highcharts（highcharts.merge（仪表选项{
亚克斯：{
停止：[
[1，#55BF3B']，//绿色
[0.55，#DF5353']//红色
],
分:0,，
最高：20
},
学分：{
已启用：false
},
系列：[{
名称：“大气压力”，
数据：[浮动（压力）]，
数据标签：{
格式：'{y:.1f}
'+
“*100 hbar”
},
工具提示：{
valueSuffix:“hpa”
}      
}]
}));
setInterval（函数（）{
$.getJSON（“http://openweather.in/localpublish/livedata.php，函数（数据）{
控制台日志（数据）；
温度=数据[0]。温度；
湿度=数据[0]。湿度；
压力=数据[0]。压力；
风速=数据[0]。风速；
winddirection=数据[0]。winddirection；
灯光=数据[0]。灯光；
降雨量=数据[0]。降雨量；
高程=数据[0]。高程；
lat=数据[0]。lat；
lang=数据[0]。lang；
bvolt=数据[0]。bvolt；
b当前=数据[0]。b当前；
svolt=data[0].svolt；
scurrent=数据[0]。scurrent；
});
point=$（“#容器温度”）.highcharts（）.series[0]。points[0]；
更新点（温度）；
point=$（“#容器湿度”）.highcharts（）.series[0]。points[0]；
更新点（浮动（湿度））；
point=$（“#容器压力”）.highcharts（）.series[0]。points[
var point, temperature, humidity, pressure, windspeed, winddirection, light, rainfall, elevation, lat, lang, bvolt, bcurrent, svolt, scurrent, temp;
    $.getJSON("http://openweather.in/localpublish/livedata.php", function(data) {
                console.log(data);
                temperature = parseFloat(data[0].Temperature);
                humidity = parseFloat(data[0].Humidity);
                pressure = parseFloat(data[0].Pressure);
                windspeed = parseFloat(data[0].Windspeed);
                winddirection = parseFloat(data[0].Winddirection);
                light = parseFloat(data[0].Light);
                rainfall = parseFloat(data[0].Rainfall);
                elevation = parseFloat(data[0].Elevation);
                lat = parseFloat(data[0].Lat);
                lang = parseFloat(data[0].Lang);
                bvolt = parseFloat(data[0].Bvolt);
                bcurrent = parseFloat(data[0].Bcurrent);
                svolt = parseFloat(data[0].Svolt);
                scurrent = parseFloat(data[0].Scurrent);

        var gaugeOptions = {

            chart: {
                type: 'solidgauge'
            },

            title: null,

            pane: {
                center: ['50%', '75%'],
                size: '120%',
                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: {
                lineWidth: 0,
                minorTickInterval: null,
                tickPixelInterval: 400,
                tickWidth: 0,
                title: {
                    y: -70
                },
                labels: {
                    y: 16
                }        
            },

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

        // The Temperature gauge
        $('#container-temperature').highcharts(Highcharts.merge(gaugeOptions, {
            yAxis: {
                    stops: [
                [1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.75, '#DF5353'] // red
                ],
                min: 0,
                max: 50     
            },

            credits: {
                enabled: false
            },

            series: [{
                name: 'Temperature',
                data: [parseFloat(temperature)],
                dataLabels: {
                    format: '{y}
' + 
                        '°C'
                },
                tooltip: {
                    valueSuffix: '°C'
                }
            }]

        }));

        // The Humidity gauge
        $('#container-humidity').highcharts(Highcharts.merge(gaugeOptions, {
            yAxis: {
                    stops: [
                [1, '#55BF3B'], // green
                    [0.55, '#DDDF0D'], // yellow
                    [0.8, '#DF5353'] // red
                ],
                min: 0,
                max: 100
                },

            credits: {
                enabled: false
            },

            series: [{
                name: 'Humidity',
                data: [parseFloat(humidity)],
                dataLabels: {
                    format: '{y:.1f}
' + 
                        '%rh'
                },
                tooltip: {
                    valueSuffix: '%rh'
                }      
            }]
        }));

        // The atmospheric pressure gauge
        $('#container-pressure').highcharts(Highcharts.merge(gaugeOptions, {
            yAxis: {
                    stops: [
                [1, '#55BF3B'], // green
                    [0.55, '#DF5353'] // red
                ],
                min: 0,
                max: 20
                },

            credits: {
                enabled: false
            },

            series: [{
                name: 'Atmospheric Pressure',
                data: [parseFloat(pressure)],
                dataLabels: {
                    format: '{y:.1f}
' + 
                        '* 100 hbar'
                },
                tooltip: {
                    valueSuffix: 'hpa'
                }      
            }]
        }));
            setInterval(function () {

        $.getJSON("http://openweather.in/localpublish/livedata.php", function(data) {
                console.log(data);
                temperature = data[0].Temperature;
                humidity = data[0].Humidity;
                pressure = data[0].Pressure;
                windspeed = data[0].Windspeed;
                winddirection = data[0].Winddirection;
                light = data[0].Light;
                rainfall = data[0].Rainfall;
                elevation = data[0].Elevation;
                lat = data[0].Lat;
                lang = data[0].Lang;
                bvolt = data[0].Bvolt;
                bcurrent = data[0].Bcurrent;
                svolt = data[0].Svolt;
                scurrent = data[0].Scurrent;
            });

        point = $('#container-temperature').highcharts().series[0].points[0];    
        point.update(parseFloat(temperature));

        point = $('#container-humidity').highcharts().series[0].points[0];       
        point.update(parseFloat(humidity));

        point = $('#container-pressure').highcharts().series[0].points[0];       
        point.update(parseFloat(pressure));
    /*  
        point = $('#container-windspeed').highcharts().series[0].points[0];       
        point.update(windspeed);

        point = $('#container-winddirection').highcharts().series[0].points[0];       
        point.update(winddirection);

        point = $('#container-light').highcharts().series[0].points[0];       
        point.update(light);

        point = $('#container-rainfall').highcharts().series[0].points[0];       
        point.update(rainfall);

        point = $('#container-elevation').highcharts().series[0].points[0];       
        point.update(elevation);

        point = $('#').highcharts().series[0].points[0];       
        point.update(humidity);

        temp = bvolt + ' V';
        $('#disp-batteryV').val(temp);

        temp = bcurrent + ' mA';
        $('#disp-batteryC').val(temp);

        temp = svolt + ' V';
        $('#disp-solarV').val(temp);

        temp = scurrent + ' mA';
        $('#disp-solarC').val(temp);
    */    
    }, 1*60*1000);  
    });