2015-09-07 105 views
0

我在我的应用程序中使用Google地理图表。 我正在复制数据库数据链接中给出的示例。Google Geo Charts:无法使用json数据绘制图表

https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en

的数据数组是

var data = google.visualization.arrayToDataTable([ 
     ['City', 'Population', 'Area'], 
     ['Rome',  2761477, 1285.31]]) 
在格式

我给与数据变量类似模式的数据。但看不到图表。

var arr=[]; 

     $.ajax({ 
      type: 'POST', 
      url: "LiveMap", 
      dataType: "json", 
      success: function (response) { 

       for (var i = 0; i < response.length; i++) { 
        var temp=[]; 
        var str=response[i].split(':'); 
        temp[0]=str[0]; 
        temp[1]=parseInt(str[1]); 
        temp[2]=parseInt(str[2]); 

        arr[i]=temp; 
       } 
      } 

     }); 

    google.load('visualization', '1', {'packages': ['geochart']}); 
    google.setOnLoadCallback(drawMarkersMap); 

     function drawMarkersMap() { 
      var data = new google.visualization.DataTable(); 
    data.addColumn("string","City"); 
    data.addColumn("number","Population"); 
    data.addColumn("number","Area"); 
    data.addRows(arr); 
     var options = { 
     region: 'IT', 
     displayMode: 'markers', 
     colorAxis: {colors: ['green', 'blue']} 
     }; 

     var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    }; 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 300px; height: 300px;"></div> 
    </body> 
</html> 

到AJAX调用的响应是

result.put("Bhopal:300:200"); 
     result.put("Hyderabad:300:200"); 
     result.put("Vizag:300:200"); 
     result.put("Mysore:300:200"); 
     result.put("Delhi:300:200") 

;

回答

0

尝试后保持下面的代码回路

google.load('visualization', '1', {'packages': ['geochart']}); 
google.setOnLoadCallback(drawMarkersMap); 

像这样:

$.ajax({ 
      type: 'POST', 
      url: "LiveMap", 
      dataType: "json", 
      success: function (response) { 

       for (var i = 0; i < response.length; i++) { 
        var temp=[]; 
        var str=response[i].split(':'); 
        temp[0]=str[0]; 
        temp[1]=parseInt(str[1]); 
        temp[2]=parseInt(str[2]); 

        arr[i]=temp; 
       } 
       google.load('visualization', '1', {'packages': ['geochart']}); 
       google.setOnLoadCallback(drawMarkersMap); 
      } 

     });