highcharts 组织结构图在加载模块时抛出错误
highcharts organization chart is throwing error when loading module
我正在尝试使用 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);
Organization chart module requires the 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);
查看官方 Highcharts Organization example 导入 sankey.js
为了进一步扩展 sheilak 的答案,您需要在导入组织之前导入 sankey,否则您仍然会得到 TypeError 并且可能还会出现错误 17。如果你打开 organization.src.js,你会看到顶部的定义使这个组织结构图依赖于 highcharts 和 sankey,这就是为什么它们必须在它之前声明。
这让我很感动,因为我们使用 Bower 来管理我们的依赖项,我首先添加了 organization 然后添加了 sankey 并且对为什么它仍然抛出这个错误感到困惑。重新排序进口固定它。
我正在尝试使用 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);
Organization chart module requires the 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);
查看官方 Highcharts Organization example 导入 sankey.js
为了进一步扩展 sheilak 的答案,您需要在导入组织之前导入 sankey,否则您仍然会得到 TypeError 并且可能还会出现错误 17。如果你打开 organization.src.js,你会看到顶部的定义使这个组织结构图依赖于 highcharts 和 sankey,这就是为什么它们必须在它之前声明。
这让我很感动,因为我们使用 Bower 来管理我们的依赖项,我首先添加了 organization 然后添加了 sankey 并且对为什么它仍然抛出这个错误感到困惑。重新排序进口固定它。