如何在Highcharts Gantt中添加自定义SVG里程碑并置于线上方？

我有一个Highcharts Gantt图表，目前使用了里程碑功能，但需要将里程碑放置在图表线条上方，同时替换为自定义SVG。

示例效果：带有橙色自定义SVG里程碑（位于线条上方）的甘特图

相关代码如下：

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  yAxis: {
    uniqueNames: true,
    categories: ['Magdala', 'Test prototype', 'Develop'],
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      name: 'Magdala',
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      name: 'Magdala',
      y: 0,
      x: Date.UTC(2014, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
        name: 'Magdala',
        x: Date.UTC(2014, 10, 25, 16),
        y: 0,
        custom: {
          label: 3
        }
      }, {
        name: 'Magdala',
        x: Date.UTC(2014, 10, 29),
        y: 0,
        custom: {
          label: 4
        },

      },
      {
        name: 'MILESTONE',
        x: Date.UTC(2014, 10, 28),
        y: 0,
        milestone: true,
        pointWidth: 100,
        color: '#fa0',
        custom: {
          label: 'MILESTONE'
        }
      }
    ]
  }]
});

请问如何将现有里程碑替换为自定义SVG？

解决方案 #

1. 调整里程碑到线条上方 #

默认里程碑居中于y轴刻度线，要移到上方，可通过修改里程碑点的y值实现（分类轴中，用小数偏移原分类索引即可向上移动），同时给y轴顶部留出避免SVG被截断的空间。

2. 替换为自定义SVG #

Highcharts支持通过marker.symbol自定义标记，直接传入SVG路径字符串即可替换默认里程碑形状，也可单独给每个里程碑设置专属SVG。

完整修改代码示例

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Custom SVG Milestones'
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      },
      // 统一配置里程碑基础样式
      milestone: {
        marker: {
          radius: 8,
          fillColor: '#fa0',
          lineWidth: 2,
          lineColor: '#fff'
        }
      }
    }
  },
  yAxis: {
    uniqueNames: true,
    categories: ['Magdala', 'Test prototype', 'Develop'],
    // 顶部留空避免SVG被截断
    minPadding: 0.2
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      name: 'Magdala',
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      name: 'Magdala',
      y: 0,
      x: Date.UTC(2014, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
        name: 'Magdala',
        x: Date.UTC(2014, 10, 25, 16),
        y: 0,
        custom: {
          label: 3
        }
      }, {
        name: 'Magdala',
        x: Date.UTC(2014, 10, 29),
        y: 0,
        custom: {
          label: 4
        },

      },
      {
        name: 'MILESTONE',
        x: Date.UTC(2014, 10, 28),
        // 偏移y值让里程碑移到线条上方
        y: -0.2,
        milestone: true,
        custom: {
          label: 'MILESTONE'
        },
        // 自定义SVG路径（菱形示例）
        marker: {
          symbol: 'M 0,-12 L 12,0 L 0,12 L -12,0 Z'
        }
      }
    ]
  }]
});

关键说明 #

• SVG路径使用：marker.symbol传入的SVG路径坐标是相对标记中心的，比如M 0,-12 L 12,0表示从(0,-12)绘制到(12,0)。
• 位置调整：分类轴中，给里程碑点的y值设置为负数小数（如-0.2），即可让其向上偏移脱离原线条位置。
• 样式自定义：通过marker.fillColor、lineWidth等属性可调整SVG的填充色、边框样式，也可直接在SVG路径中定义样式属性。

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