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

Question

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

Error screenshot

Answer 1

为 Highmaps 加载地图

地图是 JSON 类型的文件，其中包含创建图表时使用的 mapData 代码。从 official Highcharts map collection 下载 Javascript 格式的地图或使用 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 应该是地图文件的名称。