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 回答