如何在HighChats甘特图中添加系列之间的间隙?

xqk2d5yq  于 2022-09-21  发布在  React
关注(0)|答案(1)|浏览(152)

我有一张甘特图:

我想在所有系列之间增加一个水平间隙(在这个例子中是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
      }
    }]
  }]
});

小提琴here

2g32fytz

2g32fytz1#

您可以尝试为空系列添加空类别,系列之间将出现水平间距。

Highcharts.ganttChart('container', {
  yAxis: {
    categories: ['1', '', '2']
  },
  series: [{
    groupPadding: 1,
    type: 'line',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25, 12),
    }]
  }, {}, {
    type: 'line',
    data: [{
      y: 2,
      x: Date.UTC(2022, 10, 18),
    }, {
      y: 2,
      x: Date.UTC(2022, 10, 25, 12),
    }]
  }]
});

演示:https://jsfiddle.net/BlackLabel/r6ugs493/

相关问题