我正在尝试在 Ionic 应用程序中使用 Google 图表。但是，在我的浏览器中测试该应用程序时，我只得到一个空白页面。我在这里做错了什么？
我的 app.js 文件如下所示:
angular.module('testGC', ['ionic', 'googlechart', 'googlechart-docs'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("GenericChartCtrl", function ($scope) {
$scope.chartObject = {};
$scope.chartObject.type = "BarChart";
$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},
]}
]};
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night'
};
});
我的 index.html 文件如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.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>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="GenericChartCtrl">
<div google-chart chart1="sampleData" style="width: 100%;height:100%;border: 1px solid green;padding-bottom: 44px" class="has-footer">
</div>
</ion-content>
</ion-pane>
</body>
</html>
最佳答案
由于以下原因，图表未呈现:
ng-app指令丢失- 提供的图表数据 (
$scope.chartObject.data) 包含 未定义的行数据(参见$scope.onions) - 在
chartdiv 元素的声明中，无效指令chart1已指定且未定义sampleData已绑定(bind)
修改index.html
<body ng-app="chartApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="GenericChartCtrl">
<div google-chart chart="chartObject" class="chart-container">
</div>
</ion-content>
</ion-pane>
</body>
修改后的app.js
angular.module('chartApp', ['ionic', 'googlechart'])
.controller("GenericChartCtrl", function ($scope) {
$scope.chartObject = {};
$scope.chartObject.type = "BarChart";
$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 },
]
}
]
};
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night'
};
});
关于javascript - 如何在 Ionic 应用程序中使用 Google Charts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34571069/