Google地理图表：无法使用json数据绘制图表

Question

我在应用程序中使用了Google地理图表。 我正在使用数据库数据复制链接中给出的示例。

https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=zh-CN

数据数组是

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")

;

Answer 1

尝试在for循环后保留以下代码

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

         });

Google地理图表：无法使用json数据绘制图表

问题描述

1 个解决方案

解决方案1
0 2015-09-07 14:27:09

Google地理图表：无法使用json数据绘制图表

问题描述

1 个解决方案

解决方案1 0 2015-09-07 14:27:09

解决方案1
0 2015-09-07 14:27:09