Диаграмма Ганта старшей диаграммы не перекрывается

Question

Мне нужна помощь, чтобы создать Хант Ханта с перекрытием планки.нужно сгруппировать данные и не перекрывать друг друга.Пример: Ресурс 1 Задача A и Задача B перекрывают друг друга, есть ли возможность поместить Задачу B ниже Задачи A или какие-либо другие идеи?

Fiddle

  series: [{
    name: 'Resource 1',
    data: [{
      name: 'Task A',
      y: 0,
      start: today - (2 * day),
      end: today + (6 * day)
    }, {
      name: 'Task B',
      y: 0,
      start: today - (3 * day),
      end: today + (6 * day),
      color: 'rgba(140, 140, 140, 0.7)'
    }, {
      name: 'Task C',
      y: 0,
      start: today + (13 * day),
      end: today + (17 * day)
    }]
  }

Answer 1

К сожалению, эта функция пока не поддерживается. Однако, обходной путь должен использовать yAxis.breaks, чтобы сделать первую категорию больше. Затем каждая точка из этой категории должна быть переведена в центр. Проверьте код и демоверсию, размещенную ниже.

Код:

var today = new Date(),
  day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();


// THE CHART
Highcharts.ganttChart('container', {
	chart: {
  	events: {
    	load: function() {
      	var chart = this,
        	series = chart.series[0];
        
        series.points.forEach(function(point) {
          point.graphic.translate(0, -25);
        });
      }
    }
  },
  title: {
    text: 'Grouping tasks vertically'
  },
  yAxis: {
    categories: ['Resource 1', 'Resource 2', 'Resource 3'],
    breaks: [{
    	breakSize: 0.5,
      from: 0,
      to: 0
    }]
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    name: 'Resource 1',
    data: [{
      name: 'Task A',
      y: 0,
      start: today - (2 * day),
      end: today + (6 * day)
    }, {
      name: 'Task B',
      y: 0.6,
      start: today - (1 * day),
      end: today + (6 * day),
      color: 'rgba(140, 140, 140, 0.7)'
    }, {
      name: 'Task C',
      y: 0,
      start: today + (13 * day),
      end: today + (17 * day)
    }]
  }, {
    name: 'Resource 2',
    data: [{
      name: 'Task D',
      y: 1,
      start: today - (1 * day),
      end: today + (6 * day)
    }, {
      name: 'Task E',
      y: 1,
      start: today + (7 * day),
      end: today + (9 * day)
    }, {
      name: 'Task F',
      y: 1,
      start: today + (11 * day),
      end: today + (12 * day)
    }, {
      name: 'Task G',
      y: 1,
      start: today + (14 * day),
      end: today + (16 * day)
    }]
  }, {
    name: 'Resource 3',
    data: [{
      name: 'Task H',
      y: 2,
      start: today - (1.5 * day),
      end: today + (4 * day)
    }, {
      name: 'Task I',
      y: 2,
      start: today + (6 * day),
      end: today + (9 * day)
    }, {
      name: 'Task J',
      y: 2,
      start: today + (10 * day),
      end: today + (14 * day)
    }, {
      name: 'Task K',
      y: 2,
      start: today + (15 * day),
      end: today + (17 * day)
    }]
  }]
});

#container {
  max-width: 1000px;
  min-width: 450px;
  margin: 1em auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>

Демо:

• https://jsfiddle.net/BlackLabel/cdhxgurq/1/

API:

• https://api.highcharts.com/gantt/yAxis.breaks
• https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate