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

Question

我需要有关在 angular4 应用程序中获取 Highcharts 的帮助。我使用 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 创建 map 时，我似乎无法从中获取“world.js”包含或导入 map 集，还是我遗漏了什么？我尝试以与上面相同的方式获取文件 require('.../world.js')(Highcharts)我尝试使用 "<script src="">在 index.html 中标记并使用来自 highcharts 的链接作为源，这两种方式我都得到错误(提供的链接向下)。我还尝试将“world.js”中的数据直接复制到 'mapData: Highcharts.maps['custom/world'] = {...},' 下的图表选项中它就是这样工作的。那么我可以做些什么来使用它而不是复制粘贴数据呢？

Error screenshot

Answer 1

为 Highmaps 加载 map

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

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

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

}));

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

Highcharts.maps["myMapName"] =

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

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

map 已准备好导入您的应用。

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 文件的相对路径(对于导入 map 的模块)和 map-file-name 应该是 map 文件的名称。