Javascript 如何在爱奥尼亚应用程序中使用谷歌图表_Javascript_Angularjs_Ionic Framework_Google Visualization

Javascript 如何在爱奥尼亚应用程序中使用谷歌图表

javascript angularjs ionic-framework google-visualization

Javascript 如何在爱奥尼亚应用程序中使用谷歌图表,javascript,angularjs,ionic-framework,google-visualization,Javascript,Angularjs,Ionic Framework,Google Visualization,我正在尝试在Ionic应用程序中使用谷歌图表。然而，在我的浏览器中测试应用程序时，我只得到一个空白页面。我做错了什么我的app.js文件如下所示： angular.module('testGC', ['ionic', 'googlechart', 'googlechart-docs']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && wi

我正在尝试在Ionic应用程序中使用谷歌图表。然而，在我的浏览器中测试应用程序时，我只得到一个空白页面。我做错了什么

我的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>


离子空白起动器

模板指向名为

sampleData

的对象，但代码正在创建名为

chartObject

的对象。您还有

chart1=

，它应该是

chart=

由于以下原因，无法呈现图表：

```
ng app
```
指令缺失
为图表（
```
$scope.chartObject.data
```
）提供的数据包含未定义的行数据（请参见
```
$scope.onions
```
）
在
```
chart
```
div元素的声明中，无效指令
```
chart1
```
已指定且未定义
```
sampleData
```
已绑定

修改
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>

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'
    };
});

<强>

谢谢，我改变了这个，但是它仍然只显示空白的起始页而没有图表。当我查看ChromeJavaScript控制台时，它会说：加载资源失败：服务器响应状态为404（未找到）。你知道为什么吗？对不起，不知道。但我要做的第一件事是开始到处粘贴console.log（）消息，以查看代码是否正在实际运行。我还会检查页面元素，看看angular是否正在呈现页面。事实上，现在我看了看，在你的文件中任何地方都没有看到ng app指令。通常在HTML或body元素上需要类似ng app=“testGC”的内容。没有它，angular将无法处理页面。

<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>

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'
    };
});