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)不会给出任何错误或警告。我只是不明白为什么会这样。
最佳答案
Here you go ... google.setOnLoadCallback(drawChart); 从未被调用，所以我在 google.load 中添加了一个回调函数:
google.load('visualization','1',{'packages':['gauge'],'callback':drawChart})
关于javascript - 当我按下按钮时，页面只是空白并永远加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11882865/