javascript-错误TypeError：无法读取angular-highcharts中未定义的属性“ 0”

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-错误TypeError：无法读取angular-highcharts中未定义的属性“ 0”，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3626字，纯文字阅读大概需要6分钟。

内容图文

我正在使用angular5和angular-highcharts库来绘制来自highcharts演示：https://www.highcharts.com/maps/demo/category-map的简单地图,如下所示：

app.component.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)

这是没有任何数据的地图的外观：

这是我的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 {
}

解决方法:

经过数小时的努力后,发现app.module.ts文件中的地图双重声明使配置混乱.从“ highcharts / modules / map.src”中删除导入*作为地图,从提供者中删除地图可解决此问题

内容总结

以上是互联网集市为您收集整理的javascript-错误TypeError：无法读取angular-highcharts中未定义的属性“ 0”全部内容，希望文章能够帮你解决javascript-错误TypeError：无法读取angular-highcharts中未定义的属性“ 0”所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端