如何在Highcharts Gantt甘特图横向柱条中展示特定时间线的屏蔽区域

实现方案 #

核心通过 Highcharts 原生的 pattern-fill 模块配合任务分区（zones）实现，无需自定义DOM操作，可直接和任务数据绑定，适配Angular场景：

步骤1：安装依赖并引入模块

确保已安装相关依赖：

npm install highcharts highcharts-angular

在组件中引入甘特图和图案填充模块：

import * as Highcharts from 'highcharts/highcharts-gantt';
import patternFill from 'highcharts/modules/pattern-fill';
// 初始化图案填充模块
patternFill(Highcharts);

步骤2：配置甘特图参数

在任务数据的zones属性中定义需要屏蔽的时间段和斜纹样式即可：

export class GanttComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    title: { text: '甘特图屏蔽区域示例' },
    xAxis: { type: 'datetime' },
    series: [{
      type: 'gantt',
      data: [{
        name: '项目任务A',
        start: Date.UTC(2024, 4, 1),
        end: Date.UTC(2024, 4, 15),
        // 定义屏蔽分区，可配置多个
        zones: [{
          // 屏蔽区域开始时间
          start: Date.UTC(2024, 4, 5),
          // 屏蔽区域结束时间
          end: Date.UTC(2024, 4, 10),
          color: {
            pattern: {
              // 斜线路径
              path: {
                d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
                strokeWidth: 2,
                stroke: '#ff3333'
              },
              width: 10,
              height: 10,
              // 屏蔽区域背景色，可按需调整透明度
              backgroundColor: 'rgba(255, 0, 0, 0.1)'
            }
          }
        }]
      }]
    }]
  };
}

步骤3：模板中渲染组件

<highcharts-chart
  [Highcharts]="Highcharts"
  [constructorType]="'ganttChart'"
  [options]="chartOptions"
  style="width: 100%; height: 700px;"
></highcharts-chart>

补充说明 #

• 如果需要调整斜线密度、颜色，修改pattern下的width、height、stroke参数即可
• 单个任务支持配置多段屏蔽区域，在zones数组中新增对应时间段的配置项即可

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