高图甘特图避免任务重叠

Question

我回顾了这个问题的答案，其中提出了一些后续问题，涉及将解决方案泛化以支持每个类别的可变行数，现在我已经准备好了代码，可以将各种任务拆分为所需的行。

我已经使用了原来的小提琴并对其进行了修改，看到这里可以更好地理解这个概念。

    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, -50);
        });

        series = chart.series[1];

        series.points.forEach(function(point) {
          point.graphic.translate(0, -50);
       });

        series = chart.series[2];

        series.points.forEach(function(point) {
          point.graphic.translate(0, -50);
       });
}
    }
  },
  title: {
    text: 'Grouping tasks vertically'
  },
  yAxis: {
    categories: ['Resource 1', 'Resource 2', 'Resource 3'],
    breaks: [{
        breakSize: 1,
      from: 0,
      to: 0
    },{
        breakSize: 1,
      from: 1,
      to: 1
    },{
        breakSize: 1,
      from: 2,
      to: 2
    }]
  },
  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.5,
      start: today - (1 * day),
      end: today + (6 * day),
      color: 'rgba(140, 140, 140, 0.7)'
    }, {
      name: 'Task C',
      y: 0.99,
      start: today + (1 * day),
      end: today + (17 * day),
      color: 'rgba(80, 180, 180, 0.7)'
    }]
  }, {
    name: 'Resource 2',
    data: [{
      name: 'Task D',
      y: 1,
      start: today - (1 * day),
      end: today + (6 * day)
    }, {
      name: 'Task E',
      y: 1.6,
      start: today + (7 * day),
      end: today + (9 * day),
      color: 'rgba(230, 180, 180, 0.7)'
    }, {
      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.5,
      start: today + (15 * day),
      end: today + (17 * day),
      color: 'rgba(230, 180, 180, 0.7)'
    }]
  }]
});

我可以看到我们有一个必须一起工作的数字。我们首先似乎需要为每个将有多行的类别中断，我们需要将“y”属性设置为类别偏移量的十进制部分，并且我们需要在类别系列上应用翻译。

目前尚不清楚的是，特征大小、平移偏移和“y”的值是如何得出的。

接下来，我们使用每个类别的序列，而我们可以用单个序列生成图表，如树状网格，那么我们需要在这里将数据分解为单个序列吗？我们为用户提供了控制系列以与图例控制相匹配的能力，因此这可能是一个挑战。

我注意到你添加了一种颜色，当我不经常看到我的范围时，为什么有必要？

最后，你会注意到，在我的小提琴中，出现了一个名为“3”的额外类别。看了一下GantChart方法中的json，在基本转换之后，我看不出这是从哪里来的？

Answer 1

请注意，这只是一个解决方法，这不是实现的功能，在某些情况下无法工作，如示例中的工具提示中所示-它没有正确锚定（因为点已翻译）。

目前尚不清楚的是，特征大小、平移偏移和“y”的值是如何得出的。

对我来说，这种行为似乎出乎意料。留档说：

一个数字，指示在中断的开始和结束之间应该保留多少空间。中断大小以轴单位给出，因此，例如在日期时间轴上，3600000的中断大小表示相当于一小时。

应用程序编程接口：https://api.highcharts.com/highcharts/yAxis.breaks

没有关于使y轴行更高的信息，但似乎将breSize设置为1会使yAxis行高翻倍。

接下来，我们使用每个类别的序列，而我们可以用单个序列生成图表，如树状网格，那么我们需要在这里将数据分解为单个序列吗？我们为用户提供了控制系列以与图例控制相匹配的能力，因此这可能是一个挑战。

在这里，我不能100%确定您的想法。我假设您想创建像您在这里询问的那样的东西：HighCharts gantt treegrid折叠细节，但实现此功能需要对核心代码进行一些更改。

我注意到你添加了一种颜色，当我不经常看到我的范围时，为什么有必要？

我发现甘特图中的点从指定给它们的yAxis值继承颜色。

例如：将第一个点指定给yAxis中的0值，这使得该点的类设置为highcharts point highcharts-color-0，接下来在渲染点时，函数检查指定的类，并从该点上的默认highcharts颜色数组填充该颜色。所以，如果点的y设置为0.5，它将不起作用。

颜色数组的API：https://api.highcharts.com/highcharts/colors

最后，你会注意到，在我的小提琴中，出现了一个名为“3”的额外类别。看了一下GantChart方法中的json，在基本转换之后，我看不出这是从哪里来的？

出现这个“3”是因为您只定义了3个类别，同时您将最后一点的y值设置为2.5，这高于分配类别的范围。

总而言之，这个特性还没有实现，您尝试做的远不止常规API选项提供的功能。