如何配置Highcharts Gantt导航器使其仅显示里程碑？

Highcharts官方确实没有直接的配置项让导航器只显示里程碑，但可以通过以下两种方式实现：

1. 用navigator.seriesFilter过滤系列（适用于里程碑单独成系列的场景） #

如果你的里程碑是作为独立的series配置（type: 'milestone'），可以通过导航器的过滤函数筛选出仅里程碑系列：

Highcharts.ganttChart('container', {
  // 图表基础配置
  title: { text: '项目甘特图' },
  xAxis: { type: 'datetime' },
  yAxis: { type: 'category' },
  
  navigator: {
    seriesFilter: function(series) {
      // 只保留类型为milestone的系列
      return series.type === 'milestone';
    }
  },

  series: [
    {
      name: '常规任务',
      type: 'gantt',
      data: [
        { name: '需求分析', start: Date.UTC(2024, 0, 1), end: Date.UTC(2024, 0, 7) },
        { name: '开发阶段', start: Date.UTC(2024, 0, 8), end: Date.UTC(2024, 0, 20) }
      ]
    },
    {
      name: '项目里程碑',
      type: 'milestone',
      data: [
        { name: '需求定稿', start: Date.UTC(2024, 0, 7) },
        { name: '开发交付', start: Date.UTC(2024, 0, 20) }
      ]
    }
  ]
});

seriesFilter会遍历所有图表系列，返回true的系列才会在导航器中渲染，直接通过series.type判断即可区分里程碑和常规任务条系列。

2. 动态修改导航器数据（适用于里程碑与任务条同系列的场景） #

如果里程碑和任务条在同一个series中（通过数据点的milestone: true标记），可以在图表加载完成后，过滤出仅里程碑数据并更新导航器：

Highcharts.ganttChart('container', {
  chart: {
    events: {
      load: function() {
        const chart = this;
        // 从主系列中筛选出里程碑数据点
        const milestonePoints = chart.series[0].data.filter(point => point.options.milestone);
        // 将筛选后的点转换为导航器可识别的数据格式
        const navigatorData = milestonePoints.map(point => ({
          x: point.x,
          x2: point.x2 || point.x, // 里程碑x2和x通常相同
          y: point.y
        }));
        // 更新导航器的系列数据
        chart.navigator.series[0].setData(navigatorData);
      }
    }
  },
  
  series: [
    {
      name: '项目任务',
      type: 'gantt',
      data: [
        { name: '需求分析', start: Date.UTC(2024, 0, 1), end: Date.UTC(2024, 0, 7) },
        { name: '需求定稿', start: Date.UTC(2024, 0, 7), milestone: true },
        { name: '开发阶段', start: Date.UTC(2024, 0, 8), end: Date.UTC(2024, 0, 20) },
        { name: '开发交付', start: Date.UTC(2024, 0, 20), milestone: true }
      ]
    }
  ]
});

这种方式通过chart.events.load事件拦截，手动替换导航器的数据源，确保只有里程碑点被展示。

根据你的数据结构选择对应方案即可，测试时可以调整判断条件（比如用自定义属性代替milestone标记）适配你的实际场景。

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