在Angularjs中使用GeoCharts

一尘不染

在Angularjs中使用GeoCharts

angularjs

如何在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);
      }

一些忠告？

阅读 260

2020-07-04

共1个答案

一尘不染

Angular Google Chart可以做到这一点。

bower install angular-google-chart --save，然后添加googlechart到应用程序模块依赖项。

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

2020-07-04