Пользовательский символ SVG с использованием HighCharts в Angular

Question

Я хотел бы добавить пользовательский SVG в качестве маркера для моей диаграммы рассеяния HighCharts, но метод SVGRenderer, похоже, плохо работает с TypeScript.Кому-нибудь повезло с созданием пользовательских SVG в TS?

Answer 1

Чтобы добавить пользовательский маркер SVG в виде серии разбросов, вы должны добавить его как модуль.Поэтому сохраните его как файл Javascript и отредактируйте его, добавив приведенный ниже код в начало и конец файла (пример перекрестного маркера из этой демонстрации: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/):

(function(factory) {
  if (typeof module === "object" && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
})(function(Highcharts) {
  // Define a custom symbol path
  Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h) {
    return ["M", x, y, "L", x + w, y + h, "M", x + w, y, "L", x, y + h, "z"];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross =
      Highcharts.SVGRenderer.prototype.symbols.cross;
  }
});

Далее, загрузите его в компонент диаграммы:

require('./relative-path-to-the-module-file/module-file-name')(Highcharts);

Демонстрация:

• https://codesandbox.io/s/4wx4n70q3x

Документы:

• https://github.com/highcharts/highcharts-angular#to-load-a-wrapper