带有 highcharts 的 Angular4 不能使用 world.js

Question

我需要有关在 angular4 应用程序中获取高图的帮助。我使用 npm 安装了 highcharts。

我像这样在我的 app.component.ts 中加入了 highcharts 因为我有一些错误可以通过这种方式解决（也许是错误的方式）：

const Highcharts = require('highcharts');
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/data')(Highcharts);
require('highcharts/js/modules/world')(Highcharts);

之后我可以毫无问题地使用 Highcharts 创建图表，但问题是当我想使用 Highcharts.js + map.js 创建地图时，我似乎无法获得'world.js' 来自包含或导入的地图集，还是我遗漏了什么？我尝试以与 require('.../world.js')(Highcharts) 相同的方式获取文件，并尝试在 index.html 中使用 "<script src=""> 标记并使用 highcharts 中的 link 作为源，这两种方式我都得到错误（link 向下提供）。我还尝试将 'world.js' 中的数据直接复制到 'mapData: Highcharts.maps['custom/world'] = {...},' 下的图表选项中，它就是这样工作的。那么我可以做些什么来使用它而不是复制粘贴数据呢？

Error screenshot

Answer 1

为 Highmaps 加载地图

地图是 JSON 类型的文件，其中包含创建图表时使用的 mapData 代码。从 official Highcharts map collection in Javascript format or use a custom map 下载地图并将其添加到您的应用程序。编辑地图文件，通过在文件开头和结尾添加以下代码，可以像模块一样加载它：

(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function (Highcharts) {

...
/* map file data */
...

}));

在使用 GeoJSON 地图文件格式的情况下，您应该添加以上代码，此外，在添加的开头和地图文件数据之间，以下代码：

Highcharts.maps["myMapName"] =

其中 "myMapName" 是您的地图名称，将在创建图表时使用。接下来，您将加载一个本地 .js 文件，因此您应该在您的应用中添加 tsconfig.json allowJs: true:

...
"compilerOptions": {
    "allowJs": true,
    ...

地图已准备好导入您的应用程序。

import * as Highcharts from 'highcharts/highmaps';
import * as HC_myMap from './relative-path-to-the-map-file/map-file-name';
HC_myMap(Highcharts);

其中 relative-path-to-the-map-file 应该是地图文件的相对（对于导入地图的模块）路径，map-file-name 应该是地图文件的名称。

带有 highcharts 的 Angular4 不能使用 world.js

Angular4 with highcharts can't use world.js

javascript

highcharts

highmaps

angular