Google AngularJs 中的图表地图

Question

我已经创建了一个基本的 Google Chart-Map，效果非常好，但是我想将它转换成 AngularJS 以便它可以与我的其他图表一起使用。这是我的：

index.html

google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }

https://jsfiddle.net/0e3jx73b/

Answer 1

尝试Angular-Google-Chart。它以更 angular 友好的方式为 Google 图表 API 提供了一个界面。它还处理加载和回调，因此对于简单的用例，基本上是静态数据，您甚至不需要编写任何函数调用。但如果你是，该指令将绑定到你的数据并在数据更改时自动重绘图表。

JavaScript

$scope.chartObject = {
  data: [], //your array
  options: {},
  type: "GeoChart"
};

HTML

<div google-chart chart="chartObject"></div>

Answer 2

    Yes there is support to google geo maps . I have use many time this is the code

    create a directive for google map

    .directive('chart', function() {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                data: '=data'
            },
            template: '<div class="chart"></div>',
            link: function(scope, element, attrs) {
                 var chart=  new google.visualization.GeoChart(element[0]);

                var options = { region: 'IN',
        displayMode: 'regions',
        resolution: 'provinces',
        width: 640, 
        height: 480};

                scope.$watch('data', function(v) {

                    var data = google.visualization.arrayToDataTable(v);
                    chart.draw(data, options);

                });

            }
        };

    })


    and then make a angular controller to load data

    .controller('ChartController', function($scope) {
        console.log("hello")
        $scope.scoreHistory = [];

        $scope.loadDataFromServer = function() {

            var scoreHistory = [
        ['State', 'Jeenees'],
        ['Uttar Pradesh', 199581477],
        ['Maharashtra', 112372972],

      ];

            $scope.scoreHistory = scoreHistory;

        };$scope.loadDataFromServer();



    and then use this directive in html
    <div  ng-controller="ChartController"> <chart data="scoreHistory"></chart></div>


and at main html page add 

<script>
google.setOnLoadCallback(function() {

    angular.bootstrap(document, ['app']);

});

google.load('visualization', '1', {'packages': ['geochart']}); 

    </script>

and add an attact file from this 

https://jsfiddle.net/jitendravyas/f5ZLn/

Google AngularJs 中的图表地图

Google Charts-Map in AngularJs

javascript

google-visualization

angularjs