如何在Highcharts Gantt中为系列之间添加水平间距？

问题 #

我有个甘特图：

想给两个系列（1和2）之间加垂直间距（你说的“水平间距”实际是上下方向的垂直间距），试了groupPadding属性没用，代码如下：

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['1', '2']
  },
  xAxis: [{
    tickInterval: 1000 * 60 * 60 * 24,
    tickmarkPlacement: 'on',
    gridLineWidth: 1
  }, {
    tickInterval: 1000 * 60 * 60 * 24 * 30,
    tickmarkPlacement: 'on',
    gridLineWidth: 1
  }],
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  series: [{
    groupPadding: 1,
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    groupPadding: 1,
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 1,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 1,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }]
});

解决办法 #

groupPadding是给柱状图类系列设计的属性，你当前用的是line系列，所以不会生效。要实现系列间的垂直间距，有两种简单可行的方式：

方式一：给Y轴和系列添加内边距 #

直接在Y轴配置中设置上下内边距，同时给系列添加pointPadding参数控制间距：

yAxis: {
  categories: ['1', '2'],
  minPadding: 0.2, // 顶部内边距
  maxPadding: 0.2  // 底部内边距
},
plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      verticalAlign: "top",
      format: "{point.custom.label}"
    },
    pointPadding: 0.3 // 系列间的垂直间距
  }
}

方式二：改用甘特图专用系列类型 #

你当前用line系列模拟甘特图效果，不如直接使用Highcharts提供的gantt系列类型，设置pointPadding即可轻松添加间距：

series: [{
  type: 'gantt',
  pointPadding: 0.2,
  data: [{
    start: Date.UTC(2022, 10, 18),
    end: Date.UTC(2022, 10, 25, 12),
    y: 0,
    custom: {
      label: '1-2'
    }
  }]
}, {
  type: 'gantt',
  pointPadding: 0.2,
  data: [{
    start: Date.UTC(2022, 10, 18),
    end: Date.UTC(2022, 10, 25, 12),
    y: 1,
    custom: {
      label: '1-2'
    }
  }]
}]

两种方式都能让两个系列之间呈现明显的垂直间距。

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