Google GeoMaps JSON

Question

我想要做的是將JSON對象讀入我的$ angularMap.data，然後在Google GeoMap上顯示相關國家。我能夠編寫需要使用的JSON對象，但對於我的生活，我無法弄清楚如何將json對象連接到$ scope。

var app = angular.module('myApp', ['googlechart']); 

app.controller('MainCtrl', function ($scope, $http) { 
    $http.get('js/data.json') 
     .then(function(jsonData){ 
      $scope.country=jsonData.data.cols[0].label; 
      console.log(jsonData.data.cols[0].label) 
     }); 
    var angularMap = {}; 
    angularMap.type = "GeoChart"; 
    angularMap.data = [ 
     ['Country', 'Amount'], 
     ['Germany', 200], 
     ['United States', 300], 
     ['Brazil', 400], 
     ['Canada', 500], 
     ['France', 1600], 
     ['Russia', 700], 
     ['Eygpt', 900], 
     ['Pakistan', 900] 
    ]; 

    angularMap.options = { 
     width: 600, 
     height: 300, 
     colorAxis: {colors: ['#00FF00']} 
     // displayMode: 'regions' 
    }; 
    var legendName = "eventTypePerDay"; 
    var timerVar = setInterval(myTimer, 350); 

    function myTimer() { 
     var legend = document.getElementById("legend").innerHTML = legendName; 
    } 
    $scope.chart = angularMap; 

}); 

JSON

{ 
     "cols": [{ 
     "id": "", 
     "label": "Country", 
     "pattern": "", 
     "type": "string" 
     }, { 
     "id": "", 
     "label": "Amount", 
     "pattern": "", 
     "type": "number" 
     }], 
     "rows": [{ 
     "c": [{ 
      "v": "United States", 
      "f": null 
     }, { 
      "v": 300, 
      "f": null 
     }] 
     }, { 
     "c": [{ 
      "v": "Russia", 
      "f": null 
     }, { 
      "v": 500, 
      "f": null 
     }] 
     }, { 
     "c": [{ 
      "v": "Canada", 
      "f": null 
     }, { 
      "v": 100, 
      "f": null 
     }] 
     }, { 
     "c": [{ 
      "v": "Brazil", 
      "f": null 
     }, { 
      "v": 1000, 
      "f": null 
     }] 
     }, { 
     "c": [{ 
      "v": "Germany", 
      "f": null 
     }, { 
      "v": 200, 
      "f": null 
     }] 
     }] 
    } 

http://plnkr.co/edit/JHdUuyNjIVKookAwYmTq?p=preview

Answer 1

我假設你想返回的數據寫入到您的angularMap.data陣列。這真的只是一個解析的數據（這是我在下面一個有點天真的方式已經做）的事情：

var app = angular.module('myApp', ['googlechart']); 

app.controller('MainCtrl', function ($scope, $http) { 

    var angularMap = {}; 
    angularMap.type = "GeoChart"; 
    angularMap.data = []; 

    $http.get('data.json') 
     .then(function(jsonData){ 
      angularMap.data.push(
       [jsonData.data.cols[0].label,jsonData.data.cols[1].label] 
      ); 
      jsonData.data.rows.forEach(function(current) { 
       angularMap.data.push(
       [current.c[0].v, current.c[1].v] 
      ) 
      }); 
     }); 


    angularMap.options = { 
     width: 600, 
     height: 300, 
     colorAxis: {colors: ['#00FF00']} 
     // displayMode: 'regions' 
    }; 
    var legendName = "eventTypePerDay"; 
    var timerVar = setInterval(myTimer, 350); 

    function myTimer() { 
     var legend = document.getElementById("legend").innerHTML = legendName; 
    } 
    $scope.chart = angularMap; 

}); 

Answer 2

我會建議申請您的示例如下更改：

• 由於提供JSON格式與谷歌圖表數據 表兼容，你可以省略輸入數據的任何分析
• 沒有任何保證，經過指定的時間間隔的數據將被 加載，所以我建議避免使用setInterval功能在所有

說了這麼多，下面提供了修改後的例子：

var app = angular.module('myApp', ['googlechart']); 
 

 
app.controller('MainCtrl', function ($scope, $http) { 
 
    $http.get('https://gist.githubusercontent.com/vgrem/d4de661a061444642888/raw/2c3ab7a210afd3ff0656610315259827ca971da0/data.json') 
 
     .then(function (jsonData) { 
 
      $scope.country = jsonData.data.cols[0].label; 
 
      $scope.chart = createChart(jsonData.data); 
 
      document.getElementById("legend").innerHTML = jsonData.data.cols[0].label; 
 
     }); 
 
}); 
 

 

 
function createChart(data){ 
 
    var chartProperties = {}; 
 
    chartProperties.type = "GeoChart"; 
 
    chartProperties.data = data; 
 
    
 
    chartProperties.options = { 
 
     width: 600, 
 
     height: 300, 
 
     colorAxis: { colors: ['#00FF00'] } 
 
     // displayMode: 'regions' 
 
    }; 
 
    return chartProperties; 
 
}

<script src="http://code.angularjs.org/1.2.10/angular.js"></script> 
 
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script> 
 
<div ng-app='myApp' ng-controller="MainCtrl"> 
 
    <div google-chart chart="chart"></div> 
 
    <div style="margin-left: 225px;" id="legend"></div> 
 
</div>