簡體   English   中英

Google地理圖表:無法使用json數據繪制圖表

[英]Google Geo Charts: Cannot draw chart with json data

我在應用程序中使用了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")

;

嘗試在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);
            }

         });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM