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

Question

I am working on angularjs google charts.

In the example i'm trying to show Line chart and Gantt chart, but facing issue displaying the Gantt chart.

Gantt chart is not shown on the webpage, below is the error shown on the console.

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

Any inputs would be helpful.

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

You seem to be using an old version of the API. Use loader.js, not jsapi.js

using loader.js, you can load all the libs you needs by specifiying in the packages array. In this case, you need packages: ['corechart', 'gantt']

Here's the demo, updated https://plnkr.co/edit/Fxz9xP7UXqgBs3m0EfSg?p=preview

In index.html

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

and in main.js

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

Things to note:

1. It's google.charts namespaced, and not google.load directly
2. Make sure you call google.charts.load before google.charts.setOnLoadCallback
3. Make sure you load all the packages you need

You can see old version loading info, & limitations on loading charts in Google documentation here