如何在Highcharts中将自定义图标添加为标记

Question

I need to use custom icons (in our case made by icomoon), as a markers inside charts.

I tried what is explained here with font awesome icons, and it works: http://jsfiddle.net/highcharts/2A7Zf/

However I need to provide our custom icons.

Our defined font-face is this:

@font-face {
 font-family: 'icomoon';
 src: url("../webfonts/icomoon.eot?-nddtoy");
 src: url("../webfonts/icomoon.eot?#iefix-nddtoy") format("embedded-opentype"), url("../webfonts/icomoon.woff?-nddtoy") format("woff"), url("../webfonts/icomoon.ttf?-nddtoy") format("truetype"), url("../webfonts/icomoon.svg?-nddtoy#icomoon") format("svg");
 font-weight: normal;
 font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.icon-star:before {
 content: "\e976";
}
.icon-doc-filled:before {
 content: "\e975";
}
.icon-camera:before {
 content: "\e974";
}

Help is appreciated, how do I need to define font-face inside highcharts plugin for handling text symbols (shown in js fiddle) ?

Answer 1

I solved it like this:

First, setup custom Highcharts plugin to handle text symbols shown below

import Highcharts from "highcharts";

/* Highcharts plugin to handle text symbols */
(function(H) {
  function symbolWrap(proceed, symbol, x, y, w, h, options) {
    if (symbol.indexOf("text:") === 0) {
      var text = symbol.split(":")[1],
        svgElem = this.text(text, x, y + h).css({
          fontFamily: "icomoon", //icomoon fontFamily needed here
          fontSize: h * 2
        });

      if (svgElem.renderer.isVML) {
        svgElem.fillSetter = function(value, key, element) {
          element.style.color = H.Color(value).get("rgb");
        };
      }
      return svgElem;
    }
    return proceed.apply(this, [].slice.call(arguments, 1));
  }
  H.wrap(H.SVGRenderer.prototype, "symbol", symbolWrap);
  if (H.VMLRenderer) {
    H.wrap(H.VMLRenderer.prototype, "symbol", symbolWrap);
  }
})(Highcharts);

export default Highcharts;

and if you code for font is e90c , then in Highchart's marker object provide symbol like this:

marker: {
          symbol: 'text:\ue90c',
        },