Question

我正在开发angularjs谷歌排行榜。

在示例中，我试图显示折线图和甘特图，但面临显示甘特图的问题。

甘特图未显示在网页上，下面是控制台上显示的错误。

angular.js:5754 TypeError: google.visualization[$attr.googleChart] is not a constructor

任何输入都会有所帮助。

js code：

"use strict";

/*We need to manually start angular as we need to
wait for the google charting libs to be ready*/
google.setOnLoadCallback(function () {
    angular.bootstrap(document.body, ['my-app']);
});
google.load('visualization', '1', { packages: ['corechart'] });
 function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    } 

var myApp = myApp || angular.module("my-app", ["google-chart"]);

myApp.controller("IndexCtrl", function ($scope) {
    $scope.data1 = {};
    $scope.data1.dataTable = new google.visualization.DataTable();
     $scope.data1.dataTable.addColumn('string', 'Task ID');
     $scope.data1.dataTable.addColumn('string', 'Task Name');
      $scope.data1.dataTable.addColumn('date', 'Start Date');
      $scope.data1.dataTable.addColumn('date', 'End Date');
     $scope.data1.dataTable.addColumn('number', 'Duration');
     $scope.data1.dataTable.addColumn('number', 'Percent Complete');
     $scope.data1.dataTable.addColumn('string', 'Dependencies');

   $scope.data1.dataTable.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);


    $scope.data3 = {};
    $scope.data3.dataTable = new google.visualization.DataTable();
    $scope.data3.dataTable.addColumn("string", "Name")
    $scope.data3.dataTable.addColumn("number", "Qty")
    $scope.data3.dataTable.addRow(["Test", 1]);
    $scope.data3.dataTable.addRow(["Test2", 2]);
    $scope.data3.dataTable.addRow(["Test3", 3]);
});

Answer 1

您似乎在使用旧版本的API。使用loader.js，而不是jsapi.js

使用loader.js，您可以通过在packages数组中指定来加载您需要的所有库。在这种情况下，您需要packages: ['corechart', 'gantt']

这是演示版，已更新https://plnkr.co/edit/Fxz9xP7UXqgBs3m0EfSg?p=preview

在index.html中

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

并在main.js

中

    google.charts.load('visualization', '1', { packages: ['corechart', 'gantt'] });
    google.charts.setOnLoadCallback(function () {
        angular.bootstrap(document.body, ['my-app']);
    });

注意事项：

这是google.charts命名空间，而不是直接google.load
请务必在google.charts.load

google.charts.setOnLoadCallback

确保加载所需的所有包

您可以看到旧版本的加载信息，＆amp;在Google文档here

google.visualization [$ attr.googleChart]不是构造函数

1 个答案: