如何在Highcharts中將自定義圖標添加為標記

Question

我需要使用自定義圖標（在本例中為icomoon制造）作為圖表內的標記。

我嘗試使用字體真棒圖標解釋了這里的內容，並且可以正常工作： http : //jsfiddle.net/highcharts/2A7Zf/

但是，我需要提供我們的自定義圖標。

我們定義的字體是這樣的：

@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";
}

感謝幫助，我如何在highcharts插件中定義字體來處理文本符號（如js小提琴所示）？

Answer 1

我這樣解決了：

首先，設置自定義Highcharts插件以處理如下所示的文本符號

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;

並且如果您的字體代碼是e90c ，則在Highchart的標記對象中提供如下符號：

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