甘特图缩放滚动条

DataZoomAxis 是甘特图的可视化时间范围选择器，以滚动条的形式显示在甘特图底部，提供直观的时间导航和缩放控制功能。它与智能缩放系统无缝集成，实现双向同步的交互体验。

功能特性

• 可视化滚动条：在甘特图底部显示时间范围选择滚动条
• 精确范围选择：通过拖拽手柄精确控制显示的时间范围
• 快速视图导航：拖拽中间区域快速移动到不同时间段
• 实时双向同步：滚动条操作与甘特图视图实时同步更新
• 自动范围限制：防止缩放超出合理的显示范围
• 响应式设计：自动适配容器尺寸变化
• 智能缩放联动：与多级别智能缩放系统完美结合

基本配置

启用 DataZoomAxis

DataZoomAxis 需要与智能缩放功能配合使用：

const ganttOptions = {
  // 其他配置...
  timelineHeader: {
    // 智能缩放配置
    zoomScale: {
      enabled: true, // 启用智能缩放功能
      dataZoomAxis: {
        enabled: true, // 启用 DataZoomAxis 滚动条
        height: 30, // 滚动条高度
        delayTime: 10 // 事件防抖延迟
      },
      levels: [
        // 智能缩放级别配置
        [
          { unit: 'month', step: 1 },
          { unit: 'week', step: 1 }
        ]
        // 更多级别...
      ]
    }
  }
};

配置参数

基础配置

• enabled (boolean): 是否启用 DataZoomAxis 功能
• width (number): 滚动条宽度，默认自动计算
• height (number): 滚动条高度，默认 30px
• x (number): X 坐标偏移，默认与时间轴对齐
• y (number): Y 坐标偏移，默认 0
• delayTime (number): 事件触发延迟时间，默认 10ms

交互操作

基本操作

• 拖拽左手柄：调整显示范围的起始时间，向右拖拽缩小范围
• 拖拽右手柄：调整显示范围的结束时间，向左拖拽缩小范围
• 拖拽中间选择区域：整体平移当前显示的时间范围
• 滚动条背景区域：点击快速跳转到对应时间位置

双向同步机制

DataZoomAxis 与甘特图之间实现了完整的双向同步：

• 甘特图 → DataZoomAxis：当用户通过鼠标滚轮、缩放按钮等方式改变甘特图的视图时，DataZoom 会自动更新选择范围
• DataZoomAxis → 甘特图：当用户拖拽 DataZoomAxis 手柄时，甘特图会自动调整显示范围和缩放级别