ajax调用后的Google图表API

ajax调用后，我的数据可视化与谷歌的图表api有问题。ajax调用后的Google图表API

首先我做了一个ajax调用并获取了一个json对象。之后，我想从json中提取一些数据并绘制测量图。获取json和提取数据工作正常，但是当我尝试加载图表时，正文被删除，并且我得到一个空白/白色屏幕。有谁知道我做错了什么？我还尝试为图表硬编码值，而不是采用json值（但在加载图表之前保留了ajax调用），但它也不起作用。

function loadStats(){ 
    var http = getRequestObject(); 
    var city = "berlin"; 
    http.open("GET", "getTwitterSentiments.php?city="+city, true); 
    http.onreadystatechange=function() { 
     getStatistic(http) 
    }; 
    http.send(null); 
} 

function getStatistic(request) { 
    if ((request.readyState == 4) && (request.status == 200)) { 
     var data = request.responseText; 
     var JSONStats = eval("(" + data + ")"); 
     loadGauge(JSONStats.sentiment_index); 
    } 

function loadGauge(sentiment){ 
    google.load('visualization', '1', {packages:['gauge']}); 
    google.setOnLoadCallback(drawGauge); 
    function drawGauge() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['Test', sentiment]  
     ]); 

     var options = { 
      width: 100, 
      height: 100, 
      redFrom: 0, 
      redTo: 45, 
      yellowFrom: 45, 
      yellowTo: 55, 
      greenFrom: 55, 
      greenTo: 100, 
      minorTicks: 10 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('testgchart')); 
     chart.draw(data, options); 
    } 
}

来源

2012-06-21 anel

由于您没有将任何答案标记为正确，因此您是如何解决问题的？我也陷入了这一点。 – rajpy

我想你的元素testgchart没有加载到DOM，但你的代码应该可以工作。

我从你的代码所做的例子：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://www.google.com/jsapi"></script> 
    <script> 
    function loadGauge(val){ 
     google.load('visualization', '1', {packages:['gauge']}); 
     google.setOnLoadCallback(drawGauge); 
     function drawGauge() { 
      var data = google.visualization.arrayToDataTable([ 
       ['Label', 'Value'], 
       ['Test', val], 
      ]); 

      var options = { 
       width: 100, 
       height: 100, 
       redFrom: 0, 
       redTo: 45, 
       yellowFrom: 45, 
       yellowTo: 55, 
       greenFrom: 55, 
       greenTo: 100, 
       minorTicks: 10 
      }; 


      var chart = new google.visualization.Gauge(document.getElementById('average')); 
      chart.draw(data, options); 
     } 
    } 
    </script> 
    </head> 
    <body> 
    <div id="average"></div> 
    <script>loadGauge(99)</script> 
    </body> 
</html>

但是，如果你删除这条线<script>loadGauge(99)</script>与<body onload="loadGauge(99)">替换body标签这是行不通的。你可能在做类似的事情。

如果您确定元素testgchart存在，请将日志放入loadGauge并告诉我它是否真的被getStatistic调用。

来源

2012-06-23 10:03:45

尝试使用google.load()函数的回调函数。

例如，对于您的代码，请尝试以下操作：

function loadGauge(sentiment){ 
    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge}); 

} 

function drawGauge(){ 
... 
chart.draw(data, options); 
}

欲了解更多信息，检查Google Loader Developer Guide的 '动态加载' 部分： https://developers.google.com/loader/#Dynamic

如果我理解正确，调用loadGauge（）多次将而不是导致多次前往Google服务器加载所需的API，但只是一次。

来源

2012-10-17 19:39:24 mohitp

标记为正确答案！ –

ajax调用后的Google图表API

回答

相关问题