在 Angularjs 中使用 GeoCharts [英] Use GeoCharts in Angularjs
本文介绍了在 Angularjs 中使用 GeoCharts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在 Angular 中使用 Google GeoChart?我想在 Javascript https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=it#Regions
function drawRegionsMap() {var 数据 = google.visualization.arrayToDataTable([['国家'，'流行']，['德国'，200]，['美国'，300]，['巴西'，400]，['加拿大'，500]，['法国'，600]，['RU', 700]]);var 选项 = {};var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));图表绘制(数据，选项)；}一些建议?
解决方案
Angular Google Chart 可以做到这一点.
bower install angular-google-chart --save，然后将 googlechart 添加到应用模块依赖项中.
angular.module('app', ['googlechart']).controller('ctrl', function($scope) {var chart1 = {};chart1.type = "地理图表";chart1.data = [['语言环境', '计数', '百分比'],['德国', 22, 23],['美国', 34, 11],['巴西', 42, 11],['加拿大', 57, 32],['法国', 6, 9],['RU', 72, 3]];chart1.options = {宽度:600，高度:300，图表区域:{left:10,top:10,bottom:0,height:"100%"},colorAxis: {colors: ['#aec7e8', '#1f77b4']},显示模式:'区域'};chart1.formatters = {数字 : [{列数:1，模式:$ #,##0.00"}]};$scope.chart = chart1;});<头><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"><;/脚本><body ng-app="app" ng-controller="ctrl"><div google-chart chart="chart"></div></html>http://jsbin.com/wiguxu/edit?html,js,output
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
