Как импортировать коллекцию карт Highmaps в Angular 6

Question

Я пытаюсь использовать Highmaps в Angular. Я объявляю Highmap так:

    import * as Highmaps from 'highcharts/highmaps';

Кажется, это работает хорошо, так как отображает пустое поле с заголовком, пропуская саму карту.

Итак, я также установил коллекцию карт, как описано здесь .

    npm i @highcharts/map-collection

Но как импортировать коллекцию карт в Angular?

В руководстве описывается, как импортировать карты в node.js:

    var Highcharts = require('highcharts/highmaps.js'),
    map = require('@highcharts/map-collection/custom/world.geo.json');

Что такое эквивалент в Angular?

Answer 1

Вам нужно сначала импортировать MapChart из старших чартов,

import { Chart, MapChart } from 'angular-highcharts';

, а затем

const Highcharts = {maps: {}};
require('../assets/maps')(Highcharts);

проверить Demo

Answer 2

Пожалуйста, следуйте инструкциям на этой странице github https://github.com/highcharts/highcharts-angular

Я думаю, что это правильная версия, которую вы ищете.Другой - простая версия JS

. Пример загрузки карты можно найти по этой ссылке.https://github.com/highcharts/highcharts-angular/blob/master/src/app/app.component.ts

Пожалуйста, посмотрите

import * as Highcharts from 'highcharts';
import MapModule from 'highcharts/modules/map';
const mapWorld = require('@highcharts/map-collection/custom/world.geo.json')
MapModule(Highcharts);