首页 文章

在Angularjs中使用GeoCharts

提问于
浏览
5

如何在Angular中使用Google GeoChart?我想在geoChart中注入角度数据,如Javascript中的这些示例https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=it#Regions

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

一些忠告?

1 回答

  • 13

    Angular Google Chart可以做到这一点 .

    bower install angular-google-chart --save ,然后将 googlechart 添加到app模块依赖项 .

    angular.module('app', ['googlechart'])
    .controller('ctrl', function($scope) {
      var chart1 = {};
      chart1.type = "GeoChart";
      chart1.data = [
        ['Locale', 'Count', 'Percent'],
        ['Germany', 22, 23],
        ['United States', 34, 11],
        ['Brazil', 42, 11],
        ['Canada', 57, 32],
        ['France', 6, 9],
        ['RU', 72, 3]
      ];
    
      chart1.options = {
        width: 600,
        height: 300,
        chartArea: {left:10,top:10,bottom:0,height:"100%"},
        colorAxis: {colors: ['#aec7e8', '#1f77b4']},
        displayMode: 'regions'
      };
    
      chart1.formatters = {
        number : [{
          columnNum: 1,
          pattern: "$ #,##0.00"
        }]
      };
    
      $scope.chart = chart1;
    });
    
    <html>
      <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.min.js" type="text/javascript"></script>
      </head>
      <body ng-app="app" ng-controller="ctrl">
        <div google-chart chart="chart"></div>
      </body>
    </html>
    

    http://jsbin.com/wiguxu/edit?html,js,output

相关问题