Angular4 with highcharts不能使用world.js

Question

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

我包括在我app.component.ts highcharts喜欢这样，因为我有一些错误，这从而解决了（也许是错误的方式）：在此之后，我可以使用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.js + map.js创建地图时，我似乎无法从包含或导入的地图集合中获取'world.js'，或者我错过了某些东西？我尝试使用与require('.../world.js')(Highcharts)相同的方法获取文件，并尝试在index.html中使用"<script src="">标记，并使用来自highcharts的链接作为源代码，这两种方法都会导致出现错误（提供了链接）。我也尝试将'world.js'中的数据直接复制到'mapData: Highcharts.maps['custom/world'] = {...},'下的图表选项中，并以此方式工作。那么我能做些什么来使用它来代替复制粘贴数据呢？

Error screenshot

Answer 1

要加载的地图为Highmaps

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