尝试了简单的 Angular + Angular-Google-Charts，但它根本不起作用。不显示图表。测试代码如下:
//bower.json
{
"dependencies": {
"jquery": "2.1.3",
"angular": "1.2.9",
"angular-ui-select": "0.9.9",
"select2": "3.5.2",
"bootstrap": "3.3.2",
"rxjs": "2.3",
"angular-google-chart": "0.0.11"
},
"resolutions": {
"angular": ">=1.2.18"
}
}
并测试 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="bower_components/select2/select2.css"/>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css"/>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/select2/select2.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/rxjs/dist/rx.all.js"></script>
<script type="text/javascript" src="bower_components/angular-google-chart/ng-google-chart.js"></script>
<script type="text/javascript" src="bower_components/angular-google-chart/sample.js"></script>
<script type="text/javascript" src="bower_components/angular-google-chart/partials/annotation.js"></script>
<script type="text/javascript" src="bower_components/angular-google-chart/partials/generic.js"></script>
<script type="text/javascript" src="bower_components/angular-google-chart/partials/fat.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('test', []);
app.controller('TestController', function($scope) {
$scope.text = 'Hello';
$scope.chartObject = {};
$scope.onions = [
{v: "Onions"},
{v: 3},
];
$scope.chartObject.data = {"cols": [
{id: "t", label: "Topping", type: "string"},
{id: "s", label: "Slices", type: "number"}
], "rows": [
{c: [
{v: "Mushrooms"},
{v: 3},
]},
{c: $scope.onions},
{c: [
{v: "Olives"},
{v: 31}
]},
{c: [
{v: "Zucchini"},
{v: 1},
]},
{c: [
{v: "Pepperoni"},
{v: 2},
]}
]};
});
}());
</script>
</head>
<body ng-app="test">
<div ng-controller="TestController">
<div>{{text}}</div>
<div google-chart chart="chartObject" style="{{cssStyle}}"></div>
</div>
</body>
</html>
最佳答案
您没有在应用的依赖项中包含 googlechart 模块 - 尝试:
var app = angular.module('test', ['googlechart']);
关于javascript - Angular 谷歌图表不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28662917/