无效的可视化类型：带有 angular-google-chart 的甘特图

Posted 2023-05-08

【中文标题】无效的可视化类型：带有 angular-google-chart 的甘特图

【英文标题】：Invalid visualization type: gantt with angular-google-chart

【发布时间】：2016-06-23 13:13:08

【问题描述】：

我在一个 AngularJS 项目中工作，我正在尝试使用 angular-google-chart 工具添加 Google 甘特图，但它不起作用。

代码如下：

JS 代码

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

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

当我运行应用程序而不是显示图表时，显示无效的可视化类型：甘特图，并且控制台不显示任何错误。

我在Fiddle（Google 甘特图的示例，没有angular-google-charttool）中尝试了这种数据组合，并且效果很好。

有人可以帮我吗？ 谢谢！！对不起我的英语！

【参考方案1】：

问题是该库使用的是旧版本的图表库。要使用最新的，您必须更改library is loaded 的方式。 这已由 cjeffers 在GitHub 上修复。 您可以将useGstaticLoader 的值设置为true，以默认使用新的库加载器。

【讨论】：

参考：angular-google-chart.github.io/angular-google-chart/docs/…