问题：使用HighCharts做交互式甘特图时，任务条的节点跟X轴的网格线没有对齐是为什么

Question

问题：使用HighCharts做交互式甘特图时，任务条的节点跟X轴的网格线没有对齐是为什么

```javascript
HighCharts.chart('container', {
  chart: {
    type:'gantt',
    scrollablePlotArea: {
      minWidth: 300, // 设置最小可滚动宽度
      scrollPositionX: 1 // 设置默认滚动位置
    },
    zoomType: 'x', // 启用x轴方向的缩放
    height: 800, // 设置整体图表高度
  },
  title: {
    text: '交互式甘特图' //设置大标题
  },
  subtitle: {
    text: 'test' //设置小标题
  },
  plotOptions: {
    series: {
      animation: false, //禁用动画效果
      dragDrop: {
        draggableX: true, //允许在x轴方向上拖动数据点
        draggableY: true, //允许在y轴方向上拖动数据点
        dragPrecisionX:24 * 3600 * 1000 //设置x轴方向上拖动的精度
      },
      dataLabels: {
        enabled: true, //启用数据标签显示
        format: '{point.name}', //数据标签的格式，这里使用了来显示数据点的名称
        style: {
          cursor: 'default', //鼠标悬停在数据标签上时显示默认光标
          pointerEvents: 'none' //数据标签不接收鼠标事件
        }
      },
      allowPointSelect: true, //启用图表中数据点的选中功能的选项
      point: {
        events: {
          select: updateRemoveButtonStatus, //选中时间
          unselect: updateRemoveButtonStatus, //取消选中事件
          remove: updateRemoveButtonStatus, //移动事件
        }
      }
    }
  },
  xAxis: {
    opposite: true, //x轴显示在上方.反之下方
    type: 'datetime', //时间类型
    min: minTimestamp, //默认x轴最小显示时间
    max: maxDate, //默认x轴最大显示时间
    plotBands: plotBands, //图中显示样式（周末颜色突出）
    grid: {
      enabled: true, // 启用x轴上的网格线
    },
    pointInterval: 24 * 3600 * 1000, //设置数据点之间的时间间隔
    tickInterval: 24 * 3600 * 1000, // 网格线按天为单位显示
    gridLineWidth: 1, // 设置网格线宽度为1像素
    gridLineColor: 'lightgray', // 设置网格线颜色为浅灰色
    dateTimeLabelFormats: {
      day: '%m-%d' //日期标签的格式被设置为 月份-日期
    },
    maxPadding: 0.9, // 控制轴的最大填充空间  (没效果)
    endOnTick: true, // 确保轴线结束在刻度线上  (没效果)
    ordinal: false,  //确保数据点按照时间显示 (没效果)
  },
  yAxis: {
    type: 'category', //指定坐标轴的数据类型为类别
    title:{
      text:'设备',
    },
    grid: {
      enabled: true, //启用图表网格显示
      borderWidth: 1, //设置网格边框的宽度为1个像素
    },
    categories: ['机器 1', '机器 2', '机器 3'],
    reversed: true, // 从上至下显示
    tickmarkPlacement:'between'
  },
  //数据
  series:tasks,
}

```

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

问题分析：

交互式甘特图的任务条的节点跟 X 轴的网格线没有对齐的问题，可能是由于数据点之间的时间间隔设置不合适，或者是数据点的位置计算不准确导致的。

解决方案：

1. 设置数据点之间的时间间隔

可以通过调整 xAxis 中的 pointInterval 和 tickInterval 属性来控制数据点之间的时间间隔。例如，如果需要按天为单位显示数据点，可以设置 pointInterval 和 tickInterval 的值为 24 * 3600 * 1000。

// 设置数据点之间的时间间隔为 24 小时
xAxis: {
    pointInterval: 24 * 3600 * 1000, 
    tickInterval: 24 * 3600 * 1000,
    ...
}

1. 数据点位置计算不准确

如果数据点的位置计算不准确，则需要检查数据源的数据格式是否正确，并确保时间戳的格式正确。

//  示例数据源格式
{
    name: '任务 1',
    start: Date.UTC(2021, 11, 1),
    end: Date.UTC(2021, 11, 3)
}

另外，还需要注意 plotOptions.series点中的 pointPlacement 属性，该属性指定了数据点在 x 轴上的对齐方式，如果该值为 null 或者 ‘between’，则数据点的左右两端会各占一半的格子宽度。如果需要让数据点与网格线对齐，则应将该值设置为 0。

// 将点的对齐方式设置为 0
plotOptions: {
    series: {
        pointPlacement: 0,
        ...
    }
}

修改上述代码后，应该可以解决任务条的节点和X轴的网格线没有对齐的问题。