使用Angularjs GeoCharts

本文介绍了使用Angularjs GeoCharts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我如何使用谷歌GeoChart的角度？我想里面注入角度geoChart像数据在Javascript中的

功能drawRegionsMap（）{

  VAR数据= google.visualization.arrayToDataTable（[
      ['国家'，'流行']，
      ['德'，200]
      ['美国'，300]
      ['巴西'，400]
      ['加拿大'，500]
      ['法国'，600]
      [RU，700]
    ]）;    VAR的选择= {};    VAR图=新google.visualization.GeoChart（的document.getElementById（'regions_div'））;    chart.draw（数据，选项）;
  }

一些建议吗？

解决方案

How can i use Google GeoChart in Angular? I want to inject angular data inside geoChart like this examples in 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);
  }

Some advice?

解决方案

Angular Google Chart can do this.

bower install angular-google-chart --save, then add googlechart to the app module dependencies.

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

这篇关于使用Angularjs GeoCharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！