javascript - 谷歌地理 map 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;

});