我无法弄清楚如何使用ajax / json加载数据。这是我在远程文件(pie.json)中的json代码
{
cols: [{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'}],
rows: [{c:[{v: 'Work'}, {v: 11}]},
{c:[{v: 'Eat'}, {v: 2}]},
{c:[{v: 'Commute'}, {v: 2}]},
{c:[{v: 'Watch TV'}, {v:2}]},
{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]
}
这是我到目前为止所尝试的但是它不起作用。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
function ajaxjson() {
jsonreq=GetXmlHttpObject();
jsonreq.open("GET", "pie.json", true);
jsonreq.onreadystatechange = jsonHandler;
jsonreq.send(null);
}
function jsonHandler() {
if (jsonreq.readyState == 4)
{
var res = jsonreq.responseText;
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(res, 0.6)
var chart = new google.visualization.PieChart(document.getElementByI('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true});
} // end drawChart
} // end if
} // end jsonHandler
function GetXmlHttpObject()
{
var xmlHttp=null;
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
如果我将'res'变量替换为pie.json中的实际代码,那么事情就会完美。
非常感谢任何帮助。
答案 0 :(得分:0)
只是一个猜测,因为我不熟悉您正在使用的google
个对象,但我很确定responseText
只返回一个字符串。 JavaScript本身无法解析JSON(据我所知只有XML),因此您必须eval("var res = " + jsonreq.responseText)
。
我希望这会有所帮助。
答案 1 :(得分:0)
如果我在你身边,我将使用jQuery来保存一些代码:
$.getJSON("pie.json", function(data) { drawWanChart(data); });
这里是绘制图表的函数:
function drawWanChart(jsonData)
{
jsonData = jQuery.parseJSON(jsonData);
if(jsonData != null)
{
data = new google.visualization.DataTable(jsonData);
chart = new Google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data, null);
}
}
请参阅官方文件: