如何导入Angular 6中的高图映射集合

Question

我正在尝试在角度使用高图。我声明这样的高图：

    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

请按照此GitHub页面上的说明进行操作https://github.com/highcharts/highcharts-angular

我认为这是您要寻找的正确版本。另一个是普通JS版本

您可以在此链接中找到地图加载示例。https://github.com/highcharts/highcharts-angular/blob/master/src/src/app/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);

Answer 2

您需要先从HighCharts导入 MapChart ，

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

然后，

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

查看 demo