2

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 を使用しています) にエラーや警告は表示されません。なぜこれが壊れているのかわかりません。

4

1 に答える 1

1

どうぞ...google.setOnLoadCallback(drawChart);が呼び出されなかったので、google.load にコールバック関数を追加しました。

google.load('visualization','1',{'packages':['gauge'],'callback':drawChart})
于 2012-08-09T13:45:24.597 に答える