代码之家  ›  专栏  ›  技术社区  ›  hakuna

错误类型错误:无法读取角度海图中未定义的属性“0”

  •  3
  • hakuna  · 技术社区  · 6 年前

    我在用 angular5 具有 angular-highcharts 用于绘制此简单地图的库 highcharts 演示: 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)
    

    这就是地图没有任何数据时的样子: enter image description here

    以下是我的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 {
    }
    
    1 回复  |  直到 6 年前
        1
  •  4
  •   hakuna    6 年前

    经过几个小时的苦苦挣扎,终于找到了地图的双重申报。 app.module.ts 文件正在破坏配置。正在删除 import * as maps from 'highcharts/modules/map.src' maps providers 解决了这个问题