我正在尝试使用角度谷歌图表制作饼图，条形图。 我制作了一个colChartObject并为它分配数据以及其他几个选项，如大小，颜色，但浏览器上没有显示任何内容。我也使用我的自定义指令尝试了相同的方法，但遇到了同样的问题. 任何人都可以让我知道我的代码中的问题吗？
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>
</head>
<body ng-app = "ngapp">
<div ng-controller="ChartController">
<div google-chart chart="colChartObject"></div>
</div>
</body>
</html>
.JS
var app = angular.module('ngapp',[]);
app.controller('ChartController',function($scope){
$scope.colChartObject={};
$scope.colChartObject.type = "PieChart"; //setting chart type
$scope.colChartObject.displayed = true;
$scope.Colors = [
['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
];
// $scope.colChartObject.data = $scope.data; //setting chart data
//setting chart options
$scope.colChartObject.options = {
title: 'nothing special', //chart title
isStacked: 'true', //chart is stacked or not
titleTextStyle: { color: '#000000',
fontName: 'Open Sans', fontSize: 16,
bold: true, italic: false }, //title style
height: 250,
colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)] //colors
};
$scope.colChartObject.data= {
cols: [
{
id: "month",
label: "Month",
type: "string"
},
{
id: "Tables-id",
label: "Tables",
type: "number"
},
{
id: "Chairs-id",
label: "Chairs",
type: "number"
},
{
id: "Bed-id",
label: "Bed",
type: "number"
},
{
id: "Desk-id",
label: "Desk",
type: "number"
}
],
rows: [
{
c: [
{
v: "January"
},
{
v: 19, //value required to plot chart
f: "19 Tables" //description which is shown on mouse hover
},
{
v: 12,
f: "12 Chairs"
},
{
v: 7,
f: "7 Beds"
},
{
v: 4,
f: "4 Desks"
}
]
},
{
c: [
{
v: "February"
},
{
v: 13
},
{
v: 1,
f: "only 1unit"
},
{
v: 12
},
{
v: 2
}
]
},
{
c: [
{
v: "March"
},
{
v: 24
},
{
v: 5
},
{
v: 11
},
{
v: 6
}
]
}
]
}
});
你忘了将"google-chart"的模块声明为模块"ngapp"的依赖项。
你必须改变
var app = angular.module('ngapp', []);
自
var app = angular.module('ngapp', ['googlechart']);