Highchart甘特图没有重叠 [英] Highchart gantt chart no overlapping

问题描述

我需要帮助来创建一个不重叠栏的Hichart甘特图.需要将数据分组并且彼此不重叠.前任:资源1任务A和任务B相互重叠，是否有可能将任务B置于任务A下方或其他任何想法?

I need help to create a Hichart gantt with out overlapping the bar. need to have the data grouped and not to overlap each other. EX: Resource 1 Task A and Task B over lap each other, is there any possibility to place Task B below Task A or any other ideas?

小提琴

  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)
    }]
  }

推荐答案

不幸的是，尚不支持此功能.但是，解决方法是使用 yAxis.breaks 使第一个类别变大.然后，必须将此类别中的每个点转换为居中位置.检查下面发布的代码和演示.

Unfortunately, this feature is not supported yet. However, the workaround is to use yAxis.breaks to make the first category bigger. Then, each point from this category has to be translated to be centered. Check the code and demo posted below.

代码:

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

这篇关于Highchart甘特图没有重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！