如何参照plus图标实现方式为Highcharts自定义location定位SVG符号

1. 注册自定义图标 #

和原plus图标逻辑一致，直接在Highcharts的SVGRenderer原型上扩展新的symbol类型即可，路径适配了Material Icons的add_location风格比例：

Highcharts.SVGRenderer.prototype.symbols.addLocation = function (x, y, w, h) {
  return [
    // 定位标识外轮廓
    'M', x + w/2, y,
    'A', w/2, w/2, 0, 0, 1, x + w, y + w/2,
    'L', x + w, y + h * 0.6,
    'L', x + w/2, y + h,
    'L', x, y + h * 0.6,
    'L', x, y + w/2,
    'A', w/2, w/2, 0, 0, 1, x + w/2, y,
    // 中间加号
    'M', x + w * 0.3, y + h * 0.4,
    'L', x + w * 0.7, y + h * 0.4,
    'M', x + w * 0.5, y + h * 0.2,
    'L', x + w * 0.5, y + h * 0.6,
    'z'
  ];
};

2. 图标调用方式 #

替换原plus调用时的symbol名称即可，其余配置项完全兼容原有逻辑：

this.iConobject = this.highChart.renderer
  .symbol('addLocation', 0, 0, iconSize, iconSize)
  .attr({
    fill: 'blue',
    stroke: 'black',
    'stroke-width': 1
  })
  .add()
  .toFront()
  .hide();

3. 动态坐标设置 #

和原有plus图标的坐标设置逻辑完全一致，无需额外修改：

this.iConobject.addLocationIcon
  .attr({
    x: normalizedEvent.chartX - iconSize / 2,
    y: myObj.highChart.plotTop - iconSize / 2
  })
  .show();

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