问题：Highcharts判断图表中的数据点是否与其他数据点重叠，没有效果应该得到的效果：遍历图表中的所有数据点，然后检查每个数据点是否与当前悬停的数据点重叠

Question

问题：Highcharts判断图表中的数据点是否与其他数据点重叠，没有效果
应该得到的效果：遍历图表中的所有数据点，然后检查每个数据点是否与当前悬停的数据点重叠。如果发现重叠，它会根据重叠的位置将当前悬停的数据点移动到最接近的位置，以避免重叠。在代码中，根据重叠的位置，它会将数据点移动到重叠数据点的右侧或左侧
事件代码：

```javascript
      events: {
        drop: function (e) {
          const chart = this,
              point = chart.hoverPoint,
              taskss = chart.series[0].points, // Assuming tasks are in the first series
              overlapDistance = 10; // Define the distance threshold for overlap

              taskss.forEach(function(task) {
            if (task !== point) {
              // Check for overlap with other tasks
              if (Math.abs(point.plotX - task.plotX) < overlapDistance) {
                // Determine which side to snap based on the center point
                const snapSide = (point.plotX > task.plotX) ? 'right' : 'left';

                // Snap the point to the side of the overlapping task
                if (snapSide === 'right') {
                  point.update({ start: task.start - (point.end - point.start) });
                } else {
                  point.update({ start: task.end });
                }

                // Check for further overlaps and snap to the closest one
                // Additional logic to handle further overlaps and resets
              }
            }
          });
        }
      }

数据格式：

let tasks = [
  {
    name: '机器1',
    data: [{
      // start:new Date('2024-05-21 00:00:00'), // 使用dayjs格式化开始时间
      // end: new Date('2024-05-22 00:00:00'),
      start: Date.UTC(2024, 4, 21,0,0,0),
      end: Date.UTC(2024, 4, 22,23,59,59),
      name: '任务1',
      id: 'rw1A',
      y: 0,
      color: '#7cb5ec' // 设置任务点的颜色为蓝色
    }, {
      start: Date.UTC(2024, 4, 22,0,0,0),
      end: Date.UTC(2024, 4, 23,23,59,59),
      name: '任务1',
      dependency: 'rw1A',
      id: 'rw1B',
      y: 1,
      color: '#7cb5ec' // 设置任务点的颜色为蓝色
    }, {
      start: Date.UTC(2024, 4, 23,0,0,0),
      end: Date.UTC(2024, 4, 25,23,59,59),
      name: '任务1',
      dependency: 'rw1B',
      y: 2,
      color: '#7cb5ec' // 设置任务点的颜色为蓝色
    }],
    pointPadding: 0.1
  },{
    name: '机器1',
    data: [{
      start: Date.UTC(2024, 4, 26,0,0,0),
      end: Date.UTC(2024, 4, 29,23,59,59),
      name: '任务3',
      id: 'rw3A',
      y: 0,
      color:'#65B594'
    }, {
      start: Date.UTC(2024, 4, 30,0,0,0),
      end: Date.UTC(2024, 4, 31,23,59,59),
      name: '任务3',
      dependency: 'rw3A',
      y: 1,
      color:'#65B594'
    }],
    pointPadding: 0.1
  },
  {
    name: '机器1',
    data: [{
      id:'rw2A',
      start: Date.UTC(2024, 4, 24,0,0,0),
      end: Date.UTC(2024, 4, 26,23,59,59),
      name: '任务2',
      y: 1,
      color:'#F48F49'
    }, {
      start: Date.UTC(2024, 4, 28,0,0,0),
      end: Date.UTC(2024, 5, 1,23,59,59),
      name: '任务2',
      dependency: 'rw2A',
      y: 2,
      color:'#F48F49'
    }],
    pointPadding: 0.1
  }
];

Answer 1

使用Highcharts的point.events.mouseover事件结合图形的plotX和plotY属性，比较其他点位置，判断是否存在重叠。

以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。