如何在角度中添加 Highcharts 网络图？

Question

我已经包含了 highcharts 模块，我想用 angular 实现 highcharts 的网络图。你能帮我实现它吗？

请在下面找到 stackblitz 链接：

https://stackblitz.com/edit/angular-sfytxa?file=src%2Fapp%2Fapp.component.ts

Answer 1

只需加载networkgraph模块并像这样初始化它：

import * as Highcharts from "highcharts";
import * as HighchartsNetworkgraph from "highcharts/modules/networkgraph";

HighchartsNetworkgraph(Highcharts);

演示：

• https://codesandbox.io/s/9o10wry80r

我推荐你使用

highcharts-angular

官方包装。可以在这里下载：https://github.com/highcharts/highcharts-angular

Answer 2

感谢@Wojciech Chmiel 的解决方案，它对我帮助很大。

然而，对于最新版本的高图表、角度和其他依赖项，上述解决方案不起作用。它给我以下错误

This expression is not callable.
  Type 'typeof import("/node_modules/highcharts/modules/networkgraph")' has no call signatures.ts(2349)

我的依赖和版本如下

"@angular/animations": "^9.0.6",
"@angular/cdk": "^9.1.3",
"@angular/common": "^9.0.6",
"@angular/compiler": "^9.0.6",
"@angular/core": "^9.0.6",
"@angular/forms": "^9.0.6",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^9.0.6",
"@angular/platform-browser-dynamic": "^9.0.6",
"@angular/router": "^9.0.6",
angular-highcharts": "^9.0.2",
highcharts": "^8.0.4",
highcharts-angular": "^2.4.0",

我的解决方案是

import * as Highcharts from "highcharts";
import HighchartsNetworkgraph from "highcharts/modules/networkgraph";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsNetworkgraph(Highcharts);
HighchartsExporting(Highcharts);

Answer 3

只需将 * 替换为 import HighchartsNetworkgraph from "highcharts/modules/networkgraph";