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

时间：2014-11-27 12:57:06

标签： javascript jquery json highcharts getjson

我遇到了一个奇怪的问题。我有一个web page有2个highcharts gauge模块，我正在使用php脚本中的json检索数据。 json看起来像[{"PID":"1019","Date":"15-10-2014","Time":"02:52:36","Temperature":"31","Humidity":"65"}]

1）问题是，在第一次迭代中重试数据时，它不会反映在模块上。 [IMAGE]
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);  
});

1 个答案:

答案 0 :(得分：1)

试试这个


    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);  
    });
相关问题
最新问题