Highcharts Gantt中如何显示重叠任务的全部数据标签？

同一行存在两个任务，对应标签：

• 1：第一个任务开始
• 2：第一个任务结束
• 3：第二个任务开始
• 4：第二个任务结束

当前标签3被标签2遮挡无法显示，需要同时显示两个标签，最好在同一天内分开显示两个点，清晰区分任务结束与新任务开始的状态。

以下几种方法可以解决标签重叠问题，按需选择：

1. 垂直微调Y轴位置区分点 #

给重叠的两个点设置不同的y值，让它们在垂直方向上错开，同时调整Y轴范围确保显示正常：

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['Magdala'],
    min: -0.2,
    max: 0.2
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "middle",
        format: "{point.custom.label}"
      }
    }
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: -0.1,
      x: Date.UTC(2014, 10, 25),
      custom: {
        label: 2
      }
    }]
  }, {
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
      x: Date.UTC(2014, 10, 25),
      y: 0.1,
      custom: {
        label: 3
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 29),
      custom: {
        label: 4
      }
    }]
  }]
});

2. 自定义数据标签偏移 #

保持点的Y轴位置不变，通过设置数据标签的偏移量让标签错开：

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['Magdala']
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}",
        formatter: function() {
          this.point.dataLabels.y = this.point.custom.label === 2 ? 15 : -15;
          return this.point.custom.label;
        }
      }
    }
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 25),
      custom: {
        label: 2
      }
    }]
  }, {
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
      x: Date.UTC(2014, 10, 25),
      y: 0,
      custom: {
        label: 3
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 29),
      custom: {
        label: 4
      }
    }]
  }]
});

3. 轻微拆分日期显示 #

给其中一个点设置极小的时间偏移（比如当天的末尾），让两个点在X轴上轻微错开：

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['Magdala']
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 25, 23, 59, 59),
      custom: {
        label: 2
      }
    }]
  }, {
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
      x: Date.UTC(2014, 10, 25),
      y: 0,
      custom: {
        label: 3
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 29),
      custom: {
        label: 4
      }
    }]
  }]
});

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