Javascript AngularJs中的谷歌图表地图

我已经创建了一个基本的谷歌图表地图，它工作得非常好，但是我想把它转换成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);
      }

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

JavaScript

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

HTML

是的，支持谷歌地理地图。我用了很多次这是代码
为谷歌地图创建一个指令
.directive（'图表'，函数（））{
返回{
限制：'E'，
替换：正确，
范围：{
数据：'=数据'
},
模板：“”，
链接：函数（范围、元素、属性）{
var chart=new google.visualization.geographical（元素[0]）；
var options={region:'IN'，
显示模式：“区域”，
决议：“各省”，
宽度：640，
身高：480}；
范围$watch（'数据'），功能（v）{
var data=google.visualization.arrayToDataTable（v）；
图表绘制（数据、选项）；
});
}
};
})
然后制作一个角度控制器来加载数据
.controller（'ChartController'，函数（$scope）{
log（“你好”）
$scope.scoreHistory=[]；
$scope.loadDataFromServer=函数（）{
变量历史记录=[
['State'、'Jeenees']，
['Uttar Pradesh'，199581477]，
['Maharashtra'，112372972]，
];
$scope.scoreHistory=scoreHistory；
}；$scope.loadDataFromServer（）；
然后在html中使用此指令
并在主html页面添加
setOnLoadCallback（函数（）{
引导（文档，['app']）；
});
load（'visualization'，'1'，{'packages'：['geochart']}）；
并从中添加一个附加文件
https://jsfiddle.net/jitendravyas/f5ZLn/

我正在寻找一个可以复制的示例作为主要贡献者，我可以向你保证它们应该有效。如果你能告诉我它们无效，我将修复角度谷歌图表，或者帮助修复你的示例。我现在没有时间做一个示例，但我将尝试在今晚的某个时候进行调整。

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

    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/