使用ajax/json加載谷歌數據表

我想不出如何使用ajax/json加載數據表。這是我的json代碼在遠程文件（pie.json）使用ajax/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; 
    }

事情很好地工作，如果我在pie.json實際的代碼替換「水庫」變量。

任何幫助將不勝感激。

來源

2010-05-20 user1884367

只是猜測，因爲我不熟悉你使用的google對象，但我很確定responseText只是返回一個字符串。 JavaScript本身不能解析JSON（據我所知只有XML），所以你必須eval("var res = " + jsonreq.responseText)。

我希望這會有所幫助。

來源

2010-05-21 03:49:44 tau

如果我是你，我會使用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); 
    } 
}

請參考官方文檔：

來源

2013-05-07 18:03:53 Chris

使用ajax/json加載谷歌數據表

回答

相關問題