Anychart甘特图日期列过小且滚动功能失效问题求助

核心问题分析 #

你代码里的X Scroller未生效是因为错误地给一个独立的柱状图实例启用了滚动，而非目标甘特图；同时chart.fitAll()会强制图表适配容器宽度，导致日期轴被压缩，无法触发水平滚动。

修正方案 #

1. 移除无关的柱状图实例，直接给甘特图启用X Scroller
2. 设置时间轴刻度的最小宽度，避免日期单元格过窄
3. 调整缩放级别适配长周期时间范围
4. 替换fitAll()为合理的初始视图设置

修正后的完整代码 #

anychart.onDocumentReady(function() {
    // 创建数据
    var data = [{
      id: "1",
      name: "Development",
      actualStart: "2018-01-15",
      actualEnd: "2020-03-10", // 修改为两年时间范围测试
      children: [{
          id: "1_1",
          name: "Analysis",
          actualStart: "2018-01-15",
          actualEnd: "2018-01-25"
        },
        {
          id: "1_2",
          name: "Design",
          actualStart: "2018-01-20",
          actualEnd: "2018-02-04"
        },
        {
          id: "1_3",
          name: "Meeting",
          actualStart: "2018-02-05",
          actualEnd: "2018-02-05"
        },
        {
          id: "1_4",
          name: "Implementation",
          actualStart: "2018-02-05",
          actualEnd: "2018-02-24"
        },
        {
          id: "1_5",
          name: "Testing",
          actualStart: "2018-02-25",
          actualEnd: "2018-02-26"
        }
      ]
    }];
    // 创建数据树
    var treeData = anychart.data.tree(data, "as-tree");
    // 创建甘特图
    var chart = anychart.ganttProject();

    // 数据网格配置
    chart.dataGrid().column(0).enabled(false);
    chart.dataGrid().column(1).width(400);
    var column_2 = chart.dataGrid().column(1);
    column_2.title().text("Houses Reservations");

    // 时间轴头部样式
    var header = chart.getTimeline().header();
    header.fill("#232159");
    header.fontColor("#fff");

    // 给甘特图启用X Scroller（关键修正：替换错误的柱状图滚动配置）
    chart.xScroller(true);

    // 配置X轴缩放级别，适配两年时间范围
    var scale = chart.xScale();
    scale.zoomLevels([
      [{unit: 'day', count: 1}, {unit: 'month', count: 1}],
      [{unit: 'month', count: 1}, {unit: 'year', count: 1}] // 新增年份级缩放
    ]);
    // 设置刻度最小宽度，防止日期单元格过窄
    scale.minTickSize(80);

    // 绑定数据
    chart.data(treeData);
    // 指定容器
    chart.container("container");
    // 绘制图表
    chart.draw();
    // 移除fitAll()，改用设置初始视图范围（可选，根据需求调整）
    // chart.fitAll();
    chart.xZoomTo("2018-01-01", "2018-06-01"); // 设置初始显示半年范围，可滚动查看全部两年
  });

关键修改点说明 #

• 启用正确的X Scroller：删除var scroll = anychart.column();及相关代码，直接调用chart.xScroller(true)给甘特图实例启用滚动
• 设置刻度最小宽度：scale.minTickSize(80)强制每个日期单元格至少保持80px宽度，避免时间范围过大时被过度压缩
• 调整缩放级别：新增年份级缩放配置，适配两年的长周期视图
• 移除fitAll()：该方法会让图表自动拉伸以填满容器，导致水平滚动失效；改用xZoomTo()设置初始显示范围，用户可通过滚动查看完整时间轴

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