自定义SVG符号使用Angular中的Highcharts

Question

我想添加一个自定义SVG作为我的Highcharts ScatterPlot的标记，但是SVGrenderer方法似乎与Typescript效果不佳。有人在TS中创建自定义SVG吗？

Answer 1

要在散点系列类型中添加自定义SVG标记，您必须将其添加为模块。因此，将其保存为JavaScript文件，并通过将以下代码添加到文件的开始和结尾来对其进行编辑（此演示中的交叉标记示例：https：//jsfiddle.net/gh/get/get/get/library/pure/highcharts/highcharts/highcharts/highcharts/树/主/样品/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