You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何修改JpGraph甘特图代码,实现目标非连续时间甘特图?

实现非连续时间的JpGraph甘特图

嘿,你已经搞定了基础的JpGraph甘特图,要改成支持非连续时间段的版本其实挺简单的,咱们来一步步调整:

首先,先重构你的数据结构,把同一个任务的所有非连续时间段归组在一起,这样管理起来更清晰:

// 新数据结构:每个元素对应一个任务,包含任务名称和该任务的所有非连续时间段
$data = array(
    array("Label 1", array(array("2001-01-26 04:00","2001-01-26 14:00"))),
    array("Label 2", array(array("2001-01-26 10:00","2001-01-26 18:00"))),
    array("Label 3", array(
        array("2001-01-26","2001-01-26 10:00"),
        array("2001-01-26 13:20","2001-01-26 16:00")
    ))
);

接下来修改循环逻辑,核心是给同一个任务的所有分段指定相同的任务ID,这样JpGraph会自动把它们放在甘特图的同一行:

// 遍历每个任务
foreach ($data as $taskId => $taskInfo) {
    $taskName = $taskInfo[0];
    $timeSegments = $taskInfo[1];
    
    // 处理当前任务的每个非连续时间段
    foreach ($timeSegments as $segmentIdx => $segment) {
        $start = $segment[0];
        $end = $segment[1];
        
        // 创建甘特条:用同一个taskId确保同任务在同一行
        $bar = new GanttBar($taskId, $taskName, $start, $end, "", 10);
        
        // 可选:给不同分段设置不同颜色,让非连续部分更直观
        if ($segmentIdx > 0) {
            $bar->SetFillColor("#7cb5ec"); // 第一个分段用默认色,后续用蓝色
        }
        
        // 如果需要保留原代码的字体自定义逻辑,只需要在数据结构里加对应字段即可
        // 比如把任务数组改成 array("Label 1", [...], array(FF_FONT1, FS_BOLD, 12))
        // if (isset($taskInfo[2])) $bar->title->SetFont(...$taskInfo[2]);
        
        $graph1->Add($bar);
    }
}

// 输出甘特图
$graph1->Stroke();

关键调整说明:

  • 数据结构优化:避免了原数据里重复的任务ID和名称,把同一个任务的所有时间段集中管理,逻辑更清晰。
  • 统一任务ID:这是让非连续时间段显示在同一行的核心——JpGraph会根据第一个参数(任务ID)来决定甘特条的垂直位置。
  • 样式区分(可选):通过SetFillColor给不同分段设置不同颜色,能让用户一眼看出哪些是同一任务的非连续部分。

如果想要让时间轴更紧凑,只显示有任务的时间段,可以加上这行配置:

// 自动设置时间范围为所有任务的起止区间,跳过空白时段
$graph1->SetDateRangeAuto();

这样调整后,你就能得到符合需求的非连续时间甘特图啦。

内容的提问来源于stack exchange,提问作者JonDoe

火山引擎 最新活动