Highcharts技术问题：如何在X范围图中显示标记？

当然可以实现这个需求啦！你可以通过给Highcharts的X范围图添加一个散点（scatter）系列来完成这个里程碑标记的功能，具体操作步骤和示例如下：

• 确认目标分类的y轴索引：因为你的X范围图y轴是分类类型（比如DEV、TEST这类），需要先确定DEV类别对应的y轴索引——如果DEV是第一个分类，索引就是0，第二个分类索引为1，以此类推。
• 添加散点系列实现标记：在图表的series数组中新增一个scatter类型的系列，指定标记对应的x轴日期、y轴分类索引，再自定义标记的样式即可。

代码示例 #

series: [
  // 原有X范围图的项目阶段数据
  {
    type: 'xrange',
    name: 'Project Phases',
    data: [
      { x: Date.UTC(2014, 3, 1), x2: Date.UTC(2014, 3, 15), y: 0, name: 'DEV Sprint 1' },
      { x: Date.UTC(2014, 3, 16), x2: Date.UTC(2014, 4, 30), y: 0, name: 'DEV Sprint 2' },
      { x: Date.UTC(2014, 5, 1), x2: Date.UTC(2014, 5, 15), y: 0, name: 'DEV Sprint 3' },
      { x: Date.UTC(2014, 5, 16), x2: Date.UTC(2014, 6, 30), y: 0, name: 'DEV Sprint 4' },
      // 其他分类的阶段数据...
    ]
  },
  // 新增的DEV里程碑标记系列
  {
    type: "scatter",
    x: Date.UTC(2014, 6, 30), // 对应Sprint4结束的日期，也就是标记的位置
    y: 0, // 对应DEV类别的y轴索引
    marker: {
      enabled: true,
      symbol: 'circle',
      fillColor: "yellow",
      lineWidth: 1,
      radius: 6 // 可根据需要调整标记大小
    },
    name: 'DEV Milestone' // 鼠标hover时显示的标记名称
  }
]

关键细节说明 #

• y: 0：这个值对应y轴上的DEV分类，如果你需要给其他分类加标记，只需要修改成对应分类的索引即可。
• 可以通过调整marker的属性自定义标记样式：比如修改radius调整大小，lineColor设置边框颜色，symbol更换标记形状（比如'diamond'、'square'等）。
• 如果需要添加多个里程碑标记，可以在同一个scatter系列里添加多个数据对象，或者新增多个scatter系列。

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