在 angular2-highmaps 和 angular-cli 中使用特定地图

Question

我正在尝试在带有 angular2-highcharts 包的 angular-cli 应用程序中使用 Highmaps。

我想使用我保存到我的assets/map 目录中并链接到.angular-cli.json (apps[0].scripts) 的特定地图 (http://code.highcharts.com/mapdata/custom/world.js)。

NgModule

import { ChartModule } from 'angular2-highcharts';
...
imports: [
  ChartModule.forRoot(
    require('highcharts/highmaps'),
  ),
}

component.ts：

    const Highcharts = require('highcharts');

    this.mapOptions = {
      title: {
        text: 'Zoom in on country by double click',
      },

      mapNavigation: {
        enabled: false,
        enableDoubleClickZoomTo: true
      },

      colorAxis: {
        min: 1,
        max: 1000,
        type: 'logarithmic',
      },

      series: [{
        data: data.audience.distributionByCountry,
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        name: 'Population density',
        states: {
          hover: {
            color: '#a4edba',
          },
        },
        tooltip: {
          valueSuffix: '/km²',
        },
      }],
    };

html

错误（由 Angular 的 addScript.js 生成）抱怨 Highcharts 未定义。

出于好奇，我尝试添加以下内容：

Highcharts = Highcharts || {maps: {}};

在地图文件的开头，看看是否是问题所在，但并没有解决问题。

我应该怎么做才能让本地保存的地图工作？

编辑

详细的尝试报告

尝试 1

@NgModule

import { ChartModule } from 'angular2-highcharts';

declare const Highcharts: any;
require('highcharts/modules/map')(Highcharts);

import '../../assets/maps/world.js';
...
imports: [
  ChartModule.forRoot(
    Highcharts,
  ),
]

编译错误

静态解析符号值时遇到错误。对本地（非导出）符号“Highcharts”的引用。考虑导出符号（原始 .ts 文件中的位置 21:15），解析 /Users/armo/Code/origami/src/app/insights/insights.module.ts 中的符号 InsightsModule

尝试 2

import { ChartModule } from 'angular2-highcharts';
import * as Highcharts from 'highcharts';
import '../../assets/maps/world.js';

运行时错误

错误错误：未捕获（承诺）：ReferenceError：未定义Highcharts ReferenceError: Highcharts 未定义

Answer 1

要加载地图，您可以尝试以下方式：

import { ChartModule } from 'angular2-highcharts';
import * as Highcharts from 'highcharts/highmaps';

// add your maps here as they will be added to Highcharts variable
...
imports: [
  ChartModule.forRoot(
    Highcharts
  ),
}

您正在使用Highcharts.maps['custom/world']，因此您应该加载the file with map。该文件是 JS 脚本，它添加到 Highcharts.maps 的地图文件，稍后在图表的配置中使用。

如果在加载 Highmap 时遇到问题，您可以尝试使用 Highcharts + map module。然而，Angular2-highcharts using forRoot with modules applied internally 到 Highcharts 并且不先添加地图模块将不会有 Highcharts.maps，因此您将无法加载任何地图 - 您可以尝试：

import * as Highcharts from 'highcharts';
require('highcharts/modules/map')(Highcharts);
// add maps here
...
imports: [
  ChartModule.forRoot(
    Highcharts // this will pass Highcharts with the map module and maps
  ),
}

另一种选择是将系列配置中的mapData: Highcharts.maps['custom/world'], 替换为content of the map file。

编辑：

这是一个使用 angular2-highcharts 的 Highmaps 的演示：http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview

如果您想从文件中加载 mapData，我建议将其作为 JSON 数据从 map collection 中的 GeoJSON 文件加载，或者使用与模块相同的代码嵌套 JS 地图文件 (example)：

(function(factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function(Highcharts) {
...
// map file here
...
}));

接下来，您可以将其作为其他模块加载 - require('./path-to-map/your-edited-map-file')' in 'forRoot'. You might need to setallowJstotrueincompilerOptionsintsconfig.json` 在您的 Angular 应用程序的顶层。