Angular 5中Highmaps图表为空问题求助

我来帮你排查下Angular 5里Highmaps图表为空的问题，从你的配置来看，有几个常见的坑可能踩了，咱们一步步来解决：

你配置里用的是custom/world地图，首先得确保这个地图的GeoJSON文件已经被项目正确引入。在Angular里推荐用npm方式处理：

import * as Highcharts from 'highcharts';
// 导入世界地图的GeoJSON文件
import mapWorld from '@highcharts/map-collection/custom/world.geo.json';

// 把地图注册到Highcharts的地图库中
Highcharts.maps['custom/world'] = mapWorld;

如果地图文件没加载成功，图表根本没法渲染出地图轮廓，自然会显示为空。

你的代码里定义了chartData，但没看到把它放到chartConfigObject的series中！这是最容易忽略的点，Highmaps必须通过series来指定要渲染的数据和类型。修改你的配置：

let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];

this.chartConfigObject = new MapChart(<any>{
  chart: {
    borderWidth: 1,
    map: 'custom/world'
  },
  title: {
    text: 'World population 2013 by country'
  },
  subtitle: {
    text: 'Demo of Highcharts map with bubbles'
  },
  legend: {
    enabled: false
  },
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },
  // 新增series配置，把数据和地图关联起来
  series: [{
    type: 'map',
    name: 'Population',
    // 地图数据里的标识字段是iso-a3，和你的code3字段对应
    joinBy: ['iso-a3', 'code3'],
    data: chartData,
    tooltip: {
      pointFormat: '{point.name}: {point.z}'
    }
  }]
});

这里的joinBy非常重要，它负责把你的数据和地图上的区域一一匹配，要是字段对应错了，数据也没法渲染到地图上。

先确保你安装了所有必要的依赖：

npm install highcharts highcharts-angular @highcharts/map-collection --save

然后在组件里正确导入并初始化Highmaps模块：

import { MapChart } from 'highcharts-angular';
import * as Highcharts from 'highcharts';
import Highmaps from 'highcharts/modules/map';

// 初始化Highmaps模块，让Highcharts具备地图渲染能力
Highmaps(Highcharts);

没做这一步的话，地图功能根本无法正常工作。

最后确认组件模板里的容器配置正确，比如：

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartConfigObject.options"
  style="width: 100%; height: 600px; display: block;"
></highcharts-chart>

注意要把chartConfigObject.options传给options属性，因为MapChart实例的options才是图表的核心配置对象。

如果以上步骤都检查过，应该就能正常渲染出地图了。要是还有问题，可以打开浏览器开发者工具，看看Network标签里地图文件是否加载成功，或者Console标签有没有隐藏的警告（有时候表面无报错，但会有资源加载失败的提示）。

内容的提问来源于stack exchange，提问作者Keshav1007