[英]trouble getting google charts / json data working
嗨,我正在嘗試生成一個簡單的頁面,其中包含使用Google的api的一些指標。 我已經遍歷了我在網上可以找到的所有信息,無法弄清為什么它顯示空白頁。 我懷疑我的json是因為我以前沒有使用過它。
getData.php的json輸出為:
[{"hostname":"bongo","value":24},{"hostname":"chappie","value":78}]
應當生成量規的php腳本是:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Guage(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
您的json數據格式不正確,並且您將“ Gauge”(量規)錯誤輸入為“ Guage”(量具)。 我更正了您的代碼,它可按如下方式在我的php服務器上工作(順便說一句,您可以嵌套數組並使用json_encode php函數輸出符合google Datatable json字符串格式的json字符串):
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = {
cols: [{id: 'Host Name', label: 'Host Name', type: 'string'},
{id: 'Value', label: 'Value', type: 'number'}],
rows: [{c:[{v: 'bongo'}, {v: 24}]},
{c:[{v: 'chappie'}, {v: 78}]}]
}
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
要進行調試,您可以執行以下操作:google.visualization.events.addListener(bar_chart_example,'error',function(err){document.getElementById('bar_chart_example_div')。innerHTML = err.message;});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.