使用Angularjs GeoCharts [英] Use GeoCharts in Angularjs
问题描述
我如何使用谷歌GeoChart的角度？我想里面注入角度geoChart像数据在Javascript中的https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=it#Regions
功能drawRegionsMap（）{
VAR数据= google.visualization.arrayToDataTable（[
['国家'，'流行']，
['德'，200]
['美国'，300]
['巴西'，400]
['加拿大'，500]
['法国'，600]
[RU，700]
]）; VAR的选择= {}; VAR图=新google.visualization.GeoChart（的document.getElementById（'regions_div'））; chart.draw（数据，选项）;
}
一些建议吗？
角谷歌图可以做到这一点。
凉亭安装角谷歌，图表--save ，然后添加 googlechart 来应用模块依赖关系。
angular.module（'应用'，['googlechart']）\r
.controller（'CTRL'，函数（$范围）{\r
变种chart1 = {};\r
chart1.type =GeoChart;\r
chart1.data = [\r
[区域设置，伯爵，百分比]\r
['德'，22，23]，\r
['美国'，34，11]\r
['巴西'，42，11]\r
['加拿大'，57，32]，\r
['法国'，6,9]，\r
['位'，72，3]\r
];\r
\r
chart1.options = {\r
宽度：600，\r
高度：300，\r
chartArea：{左：10，前10，底部：0，高度：100％}，\r
colorAxis：{颜色：['＃aec7e8'，'＃1f77b4']}，\r
DISPLAYMODE：'区域'\r
};\r
\r
chart1.formatters = {\r
编号：[{\r
COLUMNNUM：1，\r
模式：$＃，## 0.00\r
}]\r
};\r
\r
$ scope.chart = chart1;\r
}）; \r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js\"></script>\r
＆LT;脚本SRC =https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.min.js类型=文/ JavaScript的＆GT;＆LT ; / SCRIPT＆GT;\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=应用程序NG控制器=CTRL＆GT;\r
＆LT; DIV谷歌图的图表=图＆GT;＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
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屋！
