如何在Angular应用的Highcharts Gantt图表中添加分类高亮分区？

你需要的红色高亮分类分区可以通过 Highcharts Gantt 自带的 yAxis.plotBands 配置实现，具体操作如下：

1. 依赖准备 #

确保你的Angular项目已经安装了必要的依赖，在对应模块中正确导入Highcharts相关模块：

// 对应业务模块的module.ts中导入
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  imports: [
    // 其他导入项
    HighchartsChartModule
  ]
})
export class YourModule { }

2. 组件内核心配置 #

在使用甘特图的组件中，配置y轴的plotBands属性，按你的分类区间设置红色高亮效果：

import * as Highcharts from 'highcharts/highcharts-gantt';

@Component({
  selector: 'app-gantt-demo',
  templateUrl: './gantt-demo.component.html'
})
export class GanttDemoComponent {
  Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'gantt'
    },
    yAxis: {
      type: 'category',
      // 你的y轴分类，示例为6项，前3项属于通用流程，后3项属于产品
      categories: ['需求评审', '原型设计', '研发', '功能测试', '灰度发布', '正式运营'],
      plotBands: [
        // 通用流程高亮分区
        {
          from: -0.5, // 上下偏移0.5保证完全覆盖对应分类的高度
          to: 2.5,
          color: 'rgba(255, 0, 0, 0.1)', // 半透红色背景
          borderColor: 'red',
          borderWidth: 1,
          label: {
            text: '通用流程',
            align: 'right',
            style: {
              color: 'red',
              fontWeight: 'bold'
            }
          }
        },
        // 产品类高亮分区
        {
          from: 2.5,
          to: 5.5,
          color: 'rgba(255, 0, 0, 0.1)',
          borderColor: 'red',
          borderWidth: 1,
          label: {
            text: '产品',
            align: 'right',
            style: {
              color: 'red',
              fontWeight: 'bold'
            }
          }
        }
      ]
    },
    series: [{
      type: 'gantt',
      data: [
        // 这里替换为你自己的甘特图任务数据
        { name: '需求评审', start: Date.UTC(2024, 0, 1), end: Date.UTC(2024, 0, 3) },
        { name: '原型设计', start: Date.UTC(2024, 0, 3), end: Date.UTC(2024, 0, 7) },
        { name: '研发', start: Date.UTC(2024, 0, 7), end: Date.UTC(2024, 0, 17) },
        { name: '功能测试', start: Date.UTC(2024, 0, 17), end: Date.UTC(2024, 0, 22) },
        { name: '灰度发布', start: Date.UTC(2024, 0, 22), end: Date.UTC(2024, 0, 23) },
        { name: '正式运营', start: Date.UTC(2024, 0, 23), end: Date.UTC(2024, 0, 30) }
      ]
    }]
  };
}

3. 模板中渲染图表 #

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 600px; display: block;"
></highcharts-chart>

动态分类适配 #

如果你的y轴分类是后端接口动态返回的，可以先拿到分类数组，分别计算「通用流程」和「产品」两类对应的索引区间，再动态赋值给plotBands的from和to属性即可，不需要写死数值。

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