Question

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

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

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

要加载地图，您可以尝试使用以下内容：

>>> site_scope1 = {'Servers': ['1.1.1.1', '1.1.2.2']} 
>>> vlan_helpers = {'300': ['1.1.1.1', '1.1.2.2']}
>>> [x for x in site_scope1['Servers'] if x in vlan_helpers['300']]
['1.1.1.1', '1.1.2.2']

>>> site_scope1 = {'Servers': ['1.1.1.1', '1.1.1.2']} 
>>> vlan_helpers = {'300': ['1.1.1.1', '1.1.2.2']}
>>> [x for x in site_scope1['Servers'] if x in vlan_helpers['300']]
['1.1.1.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 ), }，因此您应该加载the file with map。该文件是JS脚本，它将Highcharts.maps['custom/world']地图文件添加到稍后在图表的配置中使用。

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

Highcharts.maps

另一种选择是用content of the map file替换系列配置中的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 ), }。

修改

以下是使用带有angular2-highcharts的Highmaps的演示：http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview

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

mapData: Highcharts.maps['custom/world'],

接下来，您可以将其作为其他模块加载 - (function(factory) { if (typeof module === 'object' && module.exports) { module.exports = factory; } else { factory(Highcharts); } }(function(Highcharts) { ... // map file here ... })); allowJs require('./path-to-map/your-edited-map-file')' in 'forRoot'. You might need to set true to compilerOptions in tsconfig.json`位于角度应用的顶层。

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

修改

1 个答案: