在Angular中使用HighCharts的自定义SVG符号

Question

我想添加一个自定义SVG作为HighCharts散点图的标记，但是SVGRenderer方法似乎不适用于TypeScript。有没有人有幸在TS中创建自定义SVG？

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