如何将滚动条添加到Dhtmlx甘特图并根据计数加载数据

问题描述

我正在使用DHTMLX GANTT图表。在这里，我正在使用滚动。我的要求是，首先加载时将仅显示5个数据，一旦我们滚动剩余的5个数据应加载并且相同的内容应继续。我无法将所有代码都放在这里，我在https://stackblitz.com/edit/angular-skvn8x?file=src%2Fapp%2Fcomponents%2Fgantt.component.ts

处添加了详细代码的演示

gantt.component.ts

import {
  Component,ElementRef,OnInit,ViewChild,ViewEncapsulation
} from "@angular/core";
import { TaskService } from "../services/task.service";
import { LinkService } from "../services/link.service";
import { Task } from "../models/task";
import { Link } from "../models/link";

import "dhtmlx-gantt";

@Component({
  encapsulation: ViewEncapsulation.None,selector: "gantt",styleUrls: ["./gantt.component.css"],providers: [TaskService,LinkService],template: `
    <div #gantt_here class="gantt-chart"></div>
  `
})
export class GanttComponent implements OnInit {
  @ViewChild("gantt_here",{ static: true }) ganttContainer: ElementRef;

  constructor(
    private taskService: TaskService,private linkService: LinkService
  ) {}

  ngOnInit() {
    gantt.config.xml_date = "%Y-%m-%d %H:%i";

    gantt.init(this.ganttContainer.nativeElement);
    gantt.attachEvent("onGanttScroll",function(left,top) {
      // any custom logic here
    });

    const dp = gantt.createDataProcessor({
      task: {
        update: (data: Task) => this.taskService.update(data),create: (data: Task) => this.taskService.insert(data),delete: id => this.taskService.remove(id)
      },link: {
        update: (data: Link) => this.linkService.update(data),create: (data: Link) => this.linkService.insert(data),delete: id => this.linkService.remove(id)
      }
    });

    var all_tasks = [];
    gantt.eachTask(function(task) {
      all_tasks.push(task.id);
    });

    gantt.attachEvent("onGanttScroll",top) {
      var last_visible_task = 0;

      gantt.eachTask(function(task) {
        if (gantt.getTaskRowNode(task.id)) last_visible_task = task.id;
      });
      if (last_visible_task == all_tasks[all_tasks.length - 1])
        gantt.message("Loading new tasks");
    });
    Promise.all([this.taskService.get(),this.linkService.get()]).then(
      ([data,links]) => {
        gantt.parse({ data,links });
      }
    );
  }
}

gantt.component.css

@import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

.gantt-chart {
  position: relative;
  width: 100%;
  height: 600px;
}

解决方法

DHTMLX Gantt没有内置的方法。您需要使用Gantt API来实现自定义解决方案。这是一个如何实现的示例： http://snippet.dhtmlx.com/5/e0e09a8ae

angular gantt-chart