如何在Highcharts自定义SVG标记符号函数中访问系列数据？

当然可行！不过直接在Highcharts.SVGRenderer.prototype.symbols.cross这类符号原型函数里，确实没办法直接拿到系列或点的数据——毕竟这个函数本身只是负责生成SVG路径的纯绘图逻辑，Highcharts调用它的时候只会传入x、y、w、h这些绘图坐标参数。

不过我们有几种变通的方法来实现需求，下面给你详细拆解：

方法一：临时挂载点数据到全局上下文 #

你可以在定义点的marker.symbol时，用一个函数返回自定义符号名称，同时把当前点的数据临时挂载到Highcharts的全局对象上，这样符号函数就能拿到数据了：

series: [{
  data: [{
    y: 5,
    customTag: 'special-point',
    marker: {
      symbol: function() {
        // 把当前点实例挂载到全局临时变量
        Highcharts.tempCurrentPoint = this;
        return 'cross';
      }
    }
  }, /* 其他数据点 */]
}]

然后在你的自定义符号函数里，就可以访问这个临时变量拿到数据了：

Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h) {
  const point = Highcharts.tempCurrentPoint;
  if (point) {
    // 这里可以拿到点的自定义数据和整个系列的数据
    console.log('当前点y值:', point.y);
    console.log('系列所有数据:', point.series.data);
    
    // 甚至可以根据数据调整路径，比如给特殊点放大标记
    if (point.customTag === 'special-point') {
      w *= 1.5;
      h *= 1.5;
    }
  }

  // 返回十字标记的SVG路径
  return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'Z'];
};

⚠️ 注意：这种方法要记得在合适的时机清理临时变量，避免全局污染。

方法二：直接用marker.symbol函数（推荐） #

其实Highcharts允许marker.symbol直接是一个函数，这个函数的this指向当前的Point实例！也就是说你根本不需要修改符号原型，直接在这个函数里就能拿到所有点和系列的数据，还能动态调整路径：

series: [{
  name: '测试系列',
  data: [{
    y: 12,
    isHighlight: true,
    marker: {
      symbol: function(x, y, w, h) {
        // this就是当前的Point对象，直接拿数据
        const adjustSize = this.isHighlight ? 1.8 : 1;
        const newW = w * adjustSize;
        const newH = h * adjustSize;
        // 计算偏移量，让放大后的标记居中
        const offsetX = (w - newW) / 2;
        const offsetY = (h - newH) / 2;

        console.log('系列名称:', this.series.name);
        console.log('点的自定义属性:', this.isHighlight);

        // 返回调整后的十字路径
        return [
          'M', x + offsetX, y + offsetY, 
          'L', x + offsetX + newW, y + offsetY + newH, 
          'M', x + offsetX + newW, y + offsetY, 
          'L', x + offsetX, y + offsetY + newH, 
          'Z'
        ];
      }
    }
  }, /* 其他数据点 */]
}]

这种方式既灵活又不会污染全局，是官方更推荐的动态自定义标记方案，尤其适合需要根据点数据调整标记形状、大小的场景。

方法三：通过Wrap扩展Point的绘制逻辑 #

如果你一定要用符号原型的方式，还可以通过Highcharts的wrap方法重写Point.drawMarker，在绘制标记前把点数据传递给符号函数：

// 扩展Point的drawMarker方法
Highcharts.wrap(Highcharts.Point.prototype, 'drawMarker', function(proceed) {
  // 先保存当前点实例
  const point = this;
  // 临时修改符号函数的上下文，或者给符号函数加参数
  const originalCrossSymbol = Highcharts.SVGRenderer.prototype.symbols.cross;
  Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h) {
    // 这里可以访问point拿到数据
    console.log('点数据:', point.y);
    // 调用原符号函数生成路径
    return originalCrossSymbol.call(this, x, y, w, h);
  };

  // 执行原绘制逻辑
  proceed.apply(this, arguments);

  // 恢复原符号函数，避免影响其他点
  Highcharts.SVGRenderer.prototype.symbols.cross = originalCrossSymbol;
});

这种方法相对复杂一些，适合需要统一处理所有使用该符号的点的场景。

总的来说，如果你只是需要针对特定点根据数据自定义标记，优先用方法二；如果是全局统一的自定义符号需要访问数据，方法一或三可以满足需求。

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