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格式与Google Chart Data兼容 表可以省略任何解析输入数据
• 没有任何保证在指定的间隔数据之后 加载，所以我建议避免使用setInterval函数

话虽如此，下面提供了修改后的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;