Highmap 在 Angular5 中不显示带有 angular-highcharts 的地图

Question

我在我的项目中使用这个 angular-highcharts 模块 [https://github.com/cebor/angular-highcharts/]

并使用以下代码添加代码以显示地图（印度）

在app.module.ts

 import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';

 import * as drilldown from 'highcharts/modules/drilldown.src.js';
 import * as highmaps from 'highcharts/modules/map.src';
 import * as exporting from 'highcharts/modules/exporting.src';

 import { BarChartComponent } from './components/bar-chart/bar-
 chart.component';
 import { MultiChartComponent } from './components/multi-chart/multi-
 chart.component';
 import { MapChartComponent } from './components/map-chart/map-
 chart.component';

 export function highchartModules() {
 return [drilldown, highmaps, exporting];
 }

 @NgModule({
 imports: [
 CommonModule,
 DashboardRoutesModule,
 NgbModule,
 SharedModule,
 ChartModule
 ],
 declarations: [DashboardComponent, BarChartComponent, 
 MultiChartComponent, MapChartComponent],
 providers: [{
 provide: HIGHCHARTS_MODULES, useFactory: highchartModules
 }]
 })

 export class DashboardModule { }

在我的组件映射中-chart.component.ts

 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import * as Highcharts from 'highcharts/highmaps';

 @Component({
 selector: 'app-map-chart',
 templateUrl: './map-chart.component.html',
 styleUrls: ['./map-chart.component.scss']
 })

 export class MapChartComponent implements OnInit {

 mapChart: MapChart;

 constructor() {

  this.mapChart = new MapChart({
   series: [{
    data: [{
      'hc-key': 'in-py',
      'value': 0
    }, {
      'hc-key': 'in-ld',
      'value': 1
    }, {
      'hc-key': 'in-wb',
      'value': 2
    }, {
      'hc-key': 'in-or',
      'value': 3
    }, {
      'hc-key': 'in-br',
      'value': 4
    }, {
      'hc-key': 'in-sk',
      'value': 5
    }, {
      'hc-key': 'in-ct',
      'value': 6
    }, {
      'hc-key': 'in-tn',
      'value': 7
    }, {
      'hc-key': 'in-mp',
      'value': 8
    }, {
      'hc-key': 'in-2984',
      'value': 9
    }, {
      'hc-key': 'in-ga',
      'value': 10
    }, {
      'hc-key': 'in-nl',
      'value': 11
    }, {
      'hc-key': 'in-mn',
      'value': 12
    }, {
      'hc-key': 'in-ar',
      'value': 13
    }, {
      'hc-key': 'in-mz',
      'value': 14
    }, {
      'hc-key': 'in-tr',
      'value': 15
    }, {
      'hc-key': 'in-3464',
      'value': 16
    }, {
      'hc-key': 'in-dl',
      'value': 17
    }, {
      'hc-key': 'in-hr',
      'value': 18
    }, {
      'hc-key': 'in-ch',
      'value': 19
    }, {
      'hc-key': 'in-hp',
      'value': 20
    }, {
      'hc-key': 'in-jk',
      'value': 21
    }, {
      'hc-key': 'in-kl',
      'value': 22
    }, {
      'hc-key': 'in-ka',
      'value': 23
    }, {
      'hc-key': 'in-dn',
      'value': 24
    }, {
      'hc-key': 'in-mh',
      'value': 25
    }, {
      'hc-key': 'in-as',
      'value': 26
    }, {
      'hc-key': 'in-ap',
      'value': 27
    }, {
      'hc-key': 'in-ml',
      'value': 28
    }, {
      'hc-key': 'in-pb',
      'value': 29
    }, {
      'hc-key': 'in-rj',
      'value': 30
    }, {
      'hc-key': 'in-up',
      'value': 31
    }, {
      'hc-key': 'in-ut',
      'value': 32
    }, {
      'value': 33
    }],
    joinBy: 'hc-key',
    name: 'Random data',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
  },
  {
    type: 'mappoint',
    data: [{
      name: 'Chennai',
      x: 3354,
      y: -828
    }]
  }],
  chart: {
    map: 'countries/in/in-all'
  },

  title: {
    text: 'Highmaps basic demo'
  },

  subtitle: {
    text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/in/in-all.js">India</a>'
  },

  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },

  colorAxis: {
    min: 0
  }
});


}

ngOnInit() {
}

}

并且在地图中-chart.component.html

<div [chart]="mapChart"></div> 但是我的图表没有显示在页面上，甚至没有任何错误。如果我 console.log(this.mapChart) 然后在里面我得到系列 null.

究竟是什么导致了这里的问题。

Answer 1

我终于找到了解决方案，因为我将 mapData 键的值设置为 json object
这是我从这个 link https://code.highcharts.com/mapdata/
复制的（此处复制 geoJson 文件的数据，即各自
的地图数据 state/country 你想要的）。现在图表对象看起来像下面的代码，

{
  series: [{
    data: this.mapChartItem.data,
    mapData: this.mapDataJson,
    joinBy: 'hc-key',
    name: 'Orders For',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
     }
    }
  }

此处this.mapDataJson将是geoJson文件数据的数据。

Highmap 在 Angular5 中不显示带有 angular-highcharts 的地图

Highmap not displaying map with angular-highcharts in Angular5

angular5

highmaps