Question

我正在尝试在Angular中使用Highmaps。我这样声明Highmap：

    import * as Highmaps from 'highcharts/highmaps';

这似乎很好用，因为它显示一个带有标题的空框，缺少地图本身。

所以我还按照here的说明安装了地图集合。

    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/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

您需要先从高图导入 MapChart ，

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

然后

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

签出 Demo

如何在Angular 6中导入Highmaps地图集合

2 个答案: