能否用Dhtmlx Gantt创建一行多任务的甘特图？

Hey there! I’ve worked with Dhtmlx Gantt extensively, so let’s break down how to implement multi-task-per-row functionality while keeping performance snappy—since you mentioned angular-gantt and Anychart struggled with large datasets.

Dhtmlx Gantt doesn’t have this feature out of the box, but it’s highly customizable. The core idea is to group tasks (e.g., by resource, project phase) and render them in the same row using custom logic. Here’s a step-by-step approach:

1. Set Up Task Grouping #

First, add a grouping field to your tasks (like resource_id if you’re grouping by team members/resources). Then, override how Gantt calculates task positions to keep grouped tasks in the same row:

// Assume tasks have a `resource_id` property for grouping
gantt.attachEvent("onBeforeTaskDisplay", function(task) {
  // Assign a row identifier based on the group
  task.$group_id = task.resource_id;
  return true;
});

// Override the method that calculates a task's vertical position
gantt.getTaskTop = function(task) {
  const rowHeight = gantt.config.row_height;
  // Map group IDs to unique row indices (cache this for better performance)
  const groupRows = {};
  let index = 0;
  gantt.eachTask(t => {
    if (!groupRows[t.$group_id]) groupRows[t.$group_id] = index++;
  });
  return groupRows[task.$group_id] * rowHeight + gantt.config.top_offset;
};

2. Adjust Task Layout for Side-by-Side Display #

Make sure tasks fit neatly in the same row without awkward overlaps:

// Allow task overlap (we'll handle positioning manually)
gantt.config.allow_task_overlap = true;
// Set a smaller task height to fit multiple tasks in one row
gantt.config.task_height = 25;
// Align tasks to the left to maximize available space
gantt.config.align = "left";

3. Optimize for Large Datasets #

This is where Dhtmlx Gantt outperforms the tools you tried. Enable its built-in performance features:

• Virtual Scrolling: Only render tasks in the visible viewport to reduce DOM load

  gantt.config.scroll_mode = "auto";
  

• Lazy Loading: Load tasks in chunks based on the visible date range (perfect for 10k+ tasks)

  gantt.config.lazy_load = true;
  gantt.attachEvent("onLoadData", function(start, end, callback) {
    // Fetch tasks for the current visible date range here
    // Call callback(fetchedTasks) once data is retrieved
  });
  

• Simplify Unnecessary UI: Disable features you don’t need to cut down on DOM operations

  gantt.config.drag_move = false; // Disable task dragging if not required
  gantt.config.lightbox = false; // Hide the edit lightbox if using custom forms
  

angular-gantt and Anychart often choke on large datasets because they rely on full DOM rendering instead of virtualization. Dhtmlx Gantt’s virtual scroll and efficient task rendering engine can handle 10,000+ tasks smoothly, as long as you leverage the optimizations above.

If you want a more polished resource management workflow, Dhtmlx also offers an official Resource Management Plugin that handles multi-task-per-row rendering out of the box, along with built-in resource allocation tools.

内容的提问来源于stack exchange，提问作者Erffun