使用ajax/json加载谷歌数据表

发布于 2024-09-02 00:53:10 字数 1532 浏览 4 评论 0原文

我不知道如何使用 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; 
  }

如果我用ie.json 中的实际代码替换“res”变量，事情就会完美地进行。

任何帮助将不胜感激。

原文

I can't figure out how to load a datable using ajax/json. Here is my json code in a remote file (pie.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'}]} 
         ] 
  }

This is what I have tried so far but it doesn't work.

<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; 
  }

Things work perfectly if I replace the 'res' variable with the actual code in pie.json.

Any help would be greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蝶舞 2024-09-09 00:53:10

只是猜测，因为我不熟悉您正在使用的 google 对象，但我很确定 responseText 只是返回一个字符串。 JavaScript 无法原生解析 JSON（据我所知只能解析 XML），因此您必须 eval("var res = " + jsonreq.responseText)。

我希望这有帮助。

回复收藏 0 原文

三生一梦 2024-09-09 00:53:10

如果我在你身边，我会使用 jQuery 来保存一些代码：

$.getJSON("pie.json", function(data) { 
  绘制WanChart（数据）；
});

这里是绘制图表的函数：

 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);
    }
 }

请参考官方文档：

if I were in you, I'll use jQuery to save some code:

$.getJSON("pie.json", function(data) { 
  drawWanChart(data);
});

and here the function that draws your chart:

 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);
    }
 }

Please refer to official documentation:

回复收藏 0 原文

~没有更多了~