javascript - 错误类型错误 : Cannot read property '0' of undefined in angular-highcharts

Question

我正在使用 angular5 和 angular-highcharts 库来绘制来自 highcharts 演示的这个简单 map :https://www.highcharts.com/maps/demo/category-map像这样:

应用程序组件.ts:

import {Component, OnInit, Injectable} from '@angular/core';
import {Chart, MapChart} from 'angular-highcharts';

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Spatial Accessibility';
  mapSpatial: MapChart;

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.mapSpatial = this.getEuropeMap();   
  }

  getEuropeMap() {    
    // Instantiate the map
    return new MapChart({
      chart: {
        map: Highcharts['maps']['custom/europe'],
        spacingBottom: 20
      },
      title: {
        text: 'Europe time zones'
      },
      legend: {
        enabled: true
      },
      plotOptions: {
        map: {
          allAreas: false,
          joinBy: ['iso-a2', 'code'],
          dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            style: {
              fontWeight: 'bold'
            },
            // Only show dataLabels for areas with high label rank
            format: null,
            formatter: function () {
              if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                return this.point.properties['iso-a2'];
              }
            }
          },
          tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}: <b>{series.name}</b>'
          }
        }
      },
      series: [{
        name: 'UTC',
        data: ['IE', 'IS', 'GB', 'PT'].map(code => {
          return {code: code};
        })
      }, {
        name: 'UTC + 1',
        data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
          'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(code => {
          return {code: code};
        })
      }, {
        name: 'UTC + 2',
        data: ['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'].map(code => {
          return {code: code};
        })
      }, {
        name: 'UTC + 3',
        data: [{
          code: 'RU'
        }]
      }]
    });
  }
}

我收到这个错误:

ERROR TypeError: Cannot read property '0' of undefined
    at eval (webpack-internal:///./node_modules/highcharts/modules/map.src.js:64)
    at Array.forEach (<anonymous>)
    at a.each (webpack-internal:///./node_modules/highcharts/highcharts.js:28)
    at G.eval (webpack-internal:///./node_modules/highcharts/modules/map.src.js:60)
    at eval (webpack-internal:///./node_modules/highcharts/highcharts.js:30)
    at Array.forEach (<anonymous>)
    at Object.a.each (webpack-internal:///./node_modules/highcharts/highcharts.js:28)
    at a.fireEvent (webpack-internal:///./node_modules/highcharts/highcharts.js:30)
    at G.getSeriesExtremes (webpack-internal:///./node_modules/highcharts/highcharts.js:127)
    at G.setScale (webpack-internal:///./node_modules/highcharts/highcharts.js:146)

这是 map 在没有任何数据时的样子:

这是我的 app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import {ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as highstock from 'highcharts/modules/stock.src';
import * as highmaps from 'highcharts/modules/map.src';
import * as maps from 'highcharts/modules/map.src';
import * as noData from 'highcharts/modules/no-data-to-display.src';
import * as drilldown from 'highcharts/modules/drilldown.src';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartModule,
    HttpClientModule
  ],
  providers: [{
    provide: HIGHCHARTS_MODULES, useFactory: () => {
      return [highstock, more, maps, noData, drilldown, highmaps];
    }
  }],
  bootstrap: [AppComponent],
  exports: [
    ChartModule
  ]
})
export class AppModule {
}

Answer 1

经过几个小时的努力，我发现 app.module.ts 文件中映射的双重声明弄乱了配置。从 'highcharts/modules/map.src' 中删除 import * as maps 和从 providers 中删除 maps 解决了这个问题