Invalid visualization type: gantt with angular-google-chart

问题

I'm working in an AngularJS project and I'm trying to add a Google Gantt chart with angular-google-chart tool, but it doesn't work.

Here is the code:

JS CODE

var app = angular.module('myApp', [
   'ngRoute',
   'angular.filter',
   'googlechart'
]);

app.value('googleChartApiConfig', {
    version: '1.1',
    optionalSettings: {
      packages: ['gantt'],
      language: 'en'
    }
});


app.controller("chartController", function ($scope) {

    $scope.ganttChart = {
        "type": "gantt",
        "data": {

           "cols": [
                {id: 'Task ID', type: 'string'},
                {id: 'Task Name', type: 'string'},
                {id: 'Start Date', type: 'date'},
                {id: 'End Date', type: 'date'},
                {id: 'Duration', type: 'number'},
                {id: 'Percent Complete', type: 'number'},
                {id: 'Dependencies', type: 'string'}
            ], 
            "rows": [
                {c: [
                    {v: 'Research'},
                    {v: 'Find sources'},
                    {v: new Date(2015, 0, 1)},
                    {v: new Date(2015, 0, 5)},
                    {v: null},
                    {v: 100},
                    {v: null}
                ]},
                {c: [
                    {v: 'Write'},
                    {v: 'Write paper'},
                    {v: null},
                    {v: new Date(2015, 0, 9)},
                    {v: daysToMilliseconds(3)},
                    {v: 25},
                    {v: 'Research'}
                ]}
            ]
        }
    };
});


function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
}

HTML CODE

<div google-chart chart="ganttChart" style="height:600px; width:100%;"></div>

When I run the application instead of showing the chart, Invalid visualization type: gantt appears, and the console don't show any error.

I tried this data composition in this Fiddle (example of Google Gantt Chart , no angular-google-charttool) and it works fine.

Can anybody help me? Thanks!! And sorry for my english!

回答1:

The problem is that the library uses an old version of the chart library. To use the latest one you must change the way the library is loaded. This was fixed by cjeffers on GitHub. You can set the value of useGstaticLoader to true to use the new library loader by default.

来源：https://stackoverflow.com/questions/35886898/invalid-visualization-type-gantt-with-angular-google-chart

标签

angularjs

gantt-chart