highcharts组织结构图在加载模块时抛出错误

时间:2019-05-07 16:49:53

标签: javascript angular highcharts highcharts-ng angular2-highcharts

我正在尝试使用highcharts和highcharts-angular生成组织结构图。但是,在加载组织结构图模块时,它抛出以下错误。

organization.js:9 Uncaught TypeError: Cannot read property 'prototype' of undefined
at organization.js:9
at e (organization.js:9)
at organization.js:9
at Module../src/app/my-network-chart/my-network-chart.component.ts (my-network-chart.component.ts:9)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (app.component.ts:8)
at __webpack_require__ (bootstrap:78)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:78)
at Object.0 (main.ts:12)

我在做错什么吗?我正在使用相同的代码生成网络图表,并且可以正常工作。我仅在组织结构图中面临此问题。

加载组织结构图:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

加载网络图表:在这种情况下没有问题

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsNetworkgraph from "highcharts/modules/networkgraph";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsNetworkgraph(Highcharts);
HighchartsExporting(Highcharts);

2 个答案:

答案 0 :(得分:2)

Organization chart模块需要Sankey diagram模块,因此您需要首先导入该模块,例如:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsSankey from "highcharts/modules/sankey";
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsSankey(Highcharts);
HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

请参阅导入了sankey.js的官方Highcharts Organization example

答案 1 :(得分:1)

要进一步扩展sheilak的答案,您需要在导入组织之前先导入sankey,否则您仍然会收到TypeError以及Error 17。如果打开organization.src.js,您将看到顶部的定义使此组织结构图依赖于highcharts和sankey,这就是为什么必须同时声明它们的原因。
这让我很高兴,因为我们使用Bower来管理我们的依赖关系,然后我首先添加了组织,然后添加了sankey,并且对为什么它仍然引发此错误感到困惑。重新订购进口货可以解决。