highchartsを使ったAngular4はworld.jsを使用できません

Question

angular4アプリケーションでハイマップを取得するのに助けが必要です。 npmを使ってハイチャートをインストールしました。

私はこの方法を解き（多分それは間違った方法である）ことをいくつかのエラーだったので、私はこのように私の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のリンクをソースとして使用しようとしましたが、両方の方法でエラー（リンクが表示されます）が表示されます。私はまた、 'world.js'からのデータを直接'mapData: Highcharts.maps['custom/world'] = {...},'のチャートオプションに直接コピーしようとしました。では、データをコピーして貼り付ける代わりに、どうすれば使用できますか？

Error screenshot

Answer 1

マップ、グラフが作成されるときに使用される地図データコードを含むJSON型ファイルであるHighmaps

のマップをロードします。 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マップファイルフォーマットを使用する場合は、あなたは、さらに上記のコードを追加しなければなりません、追加始まりとマップファイルのデータは、以下のコード間："myMapName"はあなたがチャートを作成する際に使用される名前をマップである

Highcharts.maps["myMapName"] = 

。

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

マップアプリにインポートする準備ができている：あなたのアプリallowJs: trueにtsconfig.jsonに追加する必要がありますので、次は、ローカルの.jsファイルをロードします。 relative-path-to-the-map-fileマップファイルとmap-file-nameへのパスは、マップファイルの名前でなければならない（マップをインポートモジュールの）相対的でなければならない

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

。