如何在Highcharts年份柱状散点图中计算并绘制年度平均线？

我用Highcharts绘制了以年份为柱体、不同Run为散点的图表，已经通过pointPlacement参数完成柱体位置设置，代码如下：

series: [
{
    name: "Run 1",
    type: "scatter",
    data: scatterData1,     
    pointPlacement: -0.1
    },
    {
    name: "Run 2",
    type: "scatter",
    data: scatterData2,
    pointPlacement: 0   
    },
    {
    name: "Run 3",
    type: "scatter",
    data: scatterData3,
    pointPlacement: 0.1 
    }
]

当前图表运行正常，现在需要为每个年份添加一条代表该年份各Run数据平均值的连线（连接各年份的均值点），预期效果是红色线连接红色均值点，请问该如何实现？

1. 计算各年份的平均值数据 #

先基于现有三个Run的数据集，遍历每个年份，计算对应年份下三个Run数据的平均值，生成平均值数组。假设三个散点数据集的结构都是[[年份1, 值1], [年份2, 值2], ...]，代码示例如下：

// 生成平均值数组
const averageData = scatterData1.map((item, index) => {
  const year = item[0];
  const avgValue = (item[1] + scatterData2[index][1] + scatterData3[index][1]) / 3;
  return [year, avgValue];
});

2. 添加平均值连线系列 #

在原有的series数组中新增一个line类型的系列，使用刚才计算的平均值数据，同时设置样式和位置对齐：

{
  name: "平均值",
  type: "line",
  data: averageData,
  color: "#ff0000", // 设置连线为红色
  marker: {
    fillColor: "#ff0000", // 均值点填充色
    radius: 4 // 调整均值点大小
  },
  pointPlacement: 0, // 对齐年份柱体的中心位置
  tooltip: {
    pointFormat: "平均值: {point.y}"
  }
}

3. 整合完整代码 #

将新的平均值系列添加到原series数组末尾，最终的series配置如下：

series: [
  {
    name: "Run 1",
    type: "scatter",
    data: scatterData1,     
    pointPlacement: -0.1
  },
  {
    name: "Run 2",
    type: "scatter",
    data: scatterData2,
    pointPlacement: 0   
  },
  {
    name: "Run 3",
    type: "scatter",
    data: scatterData3,
    pointPlacement: 0.1 
  },
  {
    name: "平均值",
    type: "line",
    data: averageData,
    color: "#ff0000",
    marker: {
      fillColor: "#ff0000",
      radius: 4
    },
    pointPlacement: 0,
    tooltip: {
      pointFormat: "平均值: {point.y}"
    }
  }
]

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