在laravel中显示甘特图时出错

时间:2018-02-06 11:42:47

标签: javascript laravel-5 highcharts

我正在尝试使用甘特图显示每个项目的任务。不幸的是,我只能显示最后一个项目(带有任务)。它忽略了其他项目。我已经在这个例子中包含了一个我正在使用的小提琴的链接。我在这做错了什么?这是我的Javascript代码:

var data = [
                                    {
                                        "project": "edo",
                                        "tasks": [
                                            {
                                                "created_at": "2018-01-29 18:24:05",
                                                "due_date": "2018-01-03 00:00:00",
                                                "name": "new task"
                                            },
                                            {
                                                "created_at": "2018-02-05 15:50:52",
                                                "due_date": "2018-02-14 00:00:00",
                                                "name": "new task1"
                                            }
                                        ]
                                    },
                                    {
                                        "project": "srgra",
                                        "tasks": [
                                            {
                                                "created_at": "2018-02-05 15:51:29",
                                                "due_date": "2018-02-16 00:00:00",
                                                "name": "new textfield1"
                                            },
                                            {
                                                "created_at": "2018-02-05 15:51:41",
                                                "due_date": "2018-02-19 00:00:00",
                                                "name": "new textfield2"
                                            }
                                        ]
                                    },
                                    {
                                        "project": "olotu project",
                                        "tasks": [
                                            {
                                                "created_at": "2018-02-05 15:49:30",
                                                "due_date": "2018-02-22 00:00:00",
                                                "name": "new button"
                                            },
                                            {
                                                "created_at": "2018-02-05 15:49:46",
                                                "due_date": "2018-02-15 00:00:00",
                                                "name": "new button2"
                                            }
                                        ]
                                    }
                                ];


                                var today = new Date(),
                                    day = 1000 * 60 * 60 * 24;

                                // Set to 00:00:00:000 today
                                today.setUTCHours(0);
                                today.setUTCMinutes(0);
                                today.setUTCSeconds(0);
                                today.setUTCMilliseconds(0);
                                today = today.getTime();
                               //console.log(data.length);
                                for(var i = 0; i < data.length; i++) {
                                    var project = data[i].project;
                                    var tasks = data[i].tasks;
                                    //console.log(project);
                                    var final = [];
                                    for(var j=0; j < tasks.length; j++) {
                                        final.push({
                                            taskName: tasks[j].name,
                                            start: today - 2 * day,
                                            end: today + 14 * day
                                        });
                                    }

                                }


                                // THE CHART
                                Highcharts.ganttChart('analysis', {
                                    title: {
                                        text: 'Gantt Chart Test'
                                    },
                                    xAxis: {
                                        currentDateIndicator: true,
                                        min: today - 3 * day,
                                        max: today + 18 * day
                                    },

                                    series: [{
                                        name: project,
                                        data: final
                                    }]
                                });

以下是我跟随的小提琴:https://jsfiddle.net/larsac07/t0r8qz9p/

1 个答案:

答案 0 :(得分:0)

问题在于您定义final变量的位置。在您的代码中,对final数组中的每个元素清除var final=[]变量(data):

                            for(var i = 0; i < data.length; i++) {
                                var project = data[i].project;
                                var tasks = data[i].tasks;
                                //console.log(project);
                                var final = []; // <---- this is wrong ---->
                                for(var j=0; j < tasks.length; j++) {
                                    final.push({
                                        taskName: tasks[j].name,
                                        start: today - 2 * day,
                                        end: today + 14 * day
                                    });
                                }
                            }

应该在for循环之前定义:

                            var final = []; // This will work
                            for(var i = 0; i < data.length; i++) {
                                var project = data[i].project;
                                var tasks = data[i].tasks;
                                //console.log(project);
                                for(var j=0; j < tasks.length; j++) {
                                    final.push({
                                        taskName: tasks[j].name,
                                        start: today - 2 * day,
                                        end: today + 14 * day
                                    });
                                }
                            }