Verwenden Sie GeoCharts in Angularjs

Wie kann ich Google GeoChart in Angular verwenden? Ich möchte innerhalb GeoChart ähnliche Beispiele in Javascript Winkeldaten injizieren https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=it#Regions Verwenden Sie GeoCharts in Angularjs

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

Einige Ratschläge?

Quelle

2014-09-05 Silvio Troia

Angular Google Chart kann dies tun.

bower install angular-google-chart --save, dann fügen Sie googlechart zu den Abhängigkeiten des App-Moduls hinzu.

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

Quelle

2014-09-06 07:20:48

Verwenden Sie GeoCharts in Angularjs

Antwort

Verwandte Themen