无效的可视化类型:带有angular-google-chart的甘特图 [英] Invalid visualization type: gantt with angular-google-chart

问题描述

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

这是代码:

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>

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

我在小提琴( Google Gantt Chart 示例，没有angular-google-chart工具)，就可以正常工作.

有人可以帮助我吗? 谢谢！！对不起，我的英语！

解决方案

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

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!

解决方案

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.

这篇关于无效的可视化类型:带有angular-google-chart的甘特图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！