如何使用 jQuery 创建类似于甘特图的图表?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16425887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:06:36  来源:igfitidea点击:

How can I create a chart similar to Gantt chart using jQuery?

jquerygantt-chart

提问by HumptyDumptyEIZ

I am new to jQuery and have tried to modify the existing Gantt chart plugins so as to get a chart with months but not days but to no avail. Can somebody please help me in converting the three dimensional date array into a two dimensional one consisting of just the month and the year (as I guess that this might be a solution to this problem)? If I'm wrong about the solution then please provide me with one. Thank you in advance.

我是 jQuery 的新手,并试图修改现有的甘特图插件,以便获得一个有几个月而不是几天但无济于事的图表。有人可以帮我将三维日期数组转换为仅包含月份和年份的二维数组(因为我猜这可能是解决此问题的方法)?如果我对解决方案有误,请为我提供一个。先感谢您。

// Creates a 3 dimensional array [year][month][day] of every day 
    // between the given start and end dates
    function getDates(start, end) {
        var dates = [];
        dates[start.getFullYear()] = [];
        dates[start.getFullYear()][start.getMonth()] = [start]
        var last = start;
        while (last.compareTo(end) == -1) {
            var next = last.clone().addDays(1);
            if (!dates[next.getFullYear()]) { dates[next.getFullYear()] = []; }
            if (!dates[next.getFullYear()][next.getMonth()]) { 
                dates[next.getFullYear()][next.getMonth()] = []; 
            }
            dates[next.getFullYear()][next.getMonth()].push(next);
            last = next;
        }
        return dates;
    }

回答by nullability

I know of three excellent commercial libraries for creating Gantt charts of varying levels of complexity. None of them require jQuery per se, but they can be used alongside it. In order of simplest to most complex:

我知道三个优秀的商业库,用于创建不同复杂程度的甘特图。它们本身都不需要 jQuery,但它们可以与它一起使用。按照从最简单到最复杂的顺序:

回答by Zigma

Why dont you try existing ones like this

你为什么不尝试现有的像这样

回答by rbicchierai

Have a look to http://gantt.twproject.com/it is free and powerful

看看http://gantt.twproject.com/它是免费且功能强大的

for a complete description of the component see http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

有关组件的完整说明,请参阅 http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

sources available on Github here: https://github.com/robicch/jQueryGantt

Github 上的可用资源:https: //github.com/robicch/jQueryGantt