Question

http://jsfiddle.net/iansan5653/7EPjH/17/

<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript">
    function chart() {
        var pressure;
        var temperature;
        var humidity;
        var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=97c669df9c4795db96b39188000c1998&_render=json&lat=26.6403&lon=-81.8725';
        $.getJSON(url,
            function(data){
                pressure = data.value.items[0].data[1].parameters.pressure.value;
                temperature = data.value.items[0].data[1].parameters.temperature[0].value;
                humidity = data.value.items[0].data[1].parameters.humidity.value;
            }
        );
        
        google.load('visualization', '1', {
            packages: ['gauge']
        });
        google.setOnLoadCallback(drawChart);
            
        function drawChart() {
        
            pressure = eval(pressure);
            var barData = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['C/Precip', pressure]
                ]);
        
            var barOptions = {
                width: 400,
                redFrom: 28,
                redTo: 29,
                yellowFrom: 29,
                yellowTo: 30,
                greenFrom: 30,
                greenTo: 31,
                min: 28,
                max: 31,
                majorTicks: ["28","29","30","31"],
                minorTicks: 10
            };
        
            var barChart = new google.visualization.Gauge(document.getElementById('barometer_div'));
            barChart.draw(barData, barOptions);
            
            temperature = eval(temperature);
            var thermData = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['Temp (F)', temperature]
                ]);
        
            var thermOptions = {
                width: 400,
                redFrom: 80,
                redTo: 120,
                yellowFrom: 0,
                yellowTo: 40,
                yellowColor: '0099FF',
                greenFrom: 40,
                greenTo: 80,
                min: 0,
                max: 120,
                majorTicks: ["0","10","20","30","40","50","60","70","80","90","100","110","120"],
                minorTicks: 10
            };
            var thermChart = new google.visualization.Gauge(document.getElementById('thermometer_div'));
            thermChart.draw(thermData, thermOptions);
       
            humidity = eval(humidity);
            var humidData = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['Humidity', humidity]
                ]);
        
            var humidOptions = {
                width: 400,
                yellowFrom: 10,
                yellowTo: 40,
                greenFrom: 40,
                greenTo: 70,
                redColor: '0099FF',
                redFrom: 70,
                redTo: 100,
                min: 10,
                max: 100,
                majorTicks: ["10","20","30","40","50","60","70","80","90","100"],
                minorTicks: 10
            };
            var humidChart = new google.visualization.Gauge(document.getElementById('humidostat_div'));
            humidChart.draw(humidData, humidOptions);
        }
    }
    </script>
</head>
<body>
    <button onclick="chart()">Draw Chart</button>
    <div id='barometer_div'></div>
    <div id='thermometer_div'></div>
    <div id='humidostat_div'></div>
</body>

我设法让Google Charts代码无法正常工作，但是当我将所有代码包装在一个函数中并尝试通过按下按钮来调用该函数时，页面就会永远加载。我尝试运行JSLint来清理代码，但它仍然无法正常工作。此外，错误控制台（我正在使用Firefox）不会给出任何错误或警告。我只是想不通为什么会这样。

Answer 1

Here you go ... google.setOnLoadCallback(drawChart);从未被调用过，所以我在google.load中添加了一个回调函数：

google.load('visualization','1',{'packages':['gauge'],'callback':drawChart})

当我按下按钮时，页面会永远空白并加载

1 个答案: