通过requirejs加载地图数据时未定义Highcharts

Question

我正在加载带有地图模块和美国各州数据的 Highcharts，这些数据都是通过 requireJS 加载的。以下是我的 requireJS 配置。

require.config({ 
   paths: { 
      'highcharts': '/lib/highcharts/highcharts', 
      'highcharts-more': '/lib/highcharts/highcharts-more',
      'highmaps': '/lib/highcharts/modules/map',
      'highmaps-data': '/lib/highcharts/modules/data',
      'highmaps-us-maps': '/lib/highmaps-release/data/us-all' -- US States map data
   }
});

highmaps-us-maps 的数据与https://code.highcharts.com/mapdata/countries/us/us-all.js 文件中的数据相同

由于 Highcharts 是 AMD 模块，我没有 shim 配置。

在我的代码中，我使用 Highcharts 作为

require(['highcharts', 'highmaps', 'highmaps-us-maps'], function 
     (Highcharts, Highmaps, USStates) {
    // some code here to render map
    // with US states list
 });

这是抛出“Uncaught ReferenceError: Highcharts is not defined 在 us-all.js:1" 在 Highcharts.maps["countries/us/us-all"] 中加载 highmaps-us-maps 文件时"]

Answer 1

We have to slove following steps mentioned below. i hope it will work.

<highcharts-chart id="container" [Highcharts]="Highcharts" [constructorType]="chartConstructor"
                    [options]="chartOptions" [callbackFunction]="chartCallback" [(update)]=updateFromInput
                    [oneToOne]="true" style="width: 100%; height: 400px; display: block;">
                  </highcharts-chart>
(Or)
                  <div id="statechart"></div>


Import files in component

import * as Highcharts from 'highcharts/highmaps';
declare var require: any;
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);
require('highcharts/modules/offline-exporting')(Highcharts);
require('highcharts/modules/drilldown')(Highcharts);
require('highcharts/modules/data')(Highcharts);
const worldMap = require('../../../../../src/assets/js/us-all.geo.json');

Download Us all states and pate it your assets/js folder for geo URL mentioned below
https://code.highcharts.com/mapdata/countries/us/us-all.geo.json


Paste in declaration part above constructor

  chartOptions: any;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = 'mapChart';
  chartCallback;
    ngOnInit() {
       this.stateWiseMapView();
    }

    stateWiseMapView() {
    this.chartOptions = {
      chart: {
        map: worldMap
      },
      title: {
        text: 'State Wise'
      },
      credits: {
        enabled: false
      },
      subtitle: {
        text: '',
        floating: true,
        align: 'right',
        y: 50,
        style: {
          fontSize: '16px'
        }
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          alignTo: 'spacingBox'
        }
      },
      colorAxis: {
        min: 0
      },

      plotOptions: {
        map: {
          states: {
            hover: {
              color: '#EEDD66'
            }
          }
        }
      },
      series: [{
        name: '',
        states: {
          hover: {
            color: '#BADA55'
          }
        },
        dataLabels: {
          enabled: true,
          format: '{point.name}'
        },
        point: {
        },
        tooltip: {
          ySuffix: ' %'
        },
        cursor: 'pointer',
        allAreas: false,
        data: [
          ['us-ma', 4],
          ['us-wa', 1],
          ['us-ca', 2],
          ['us-or', 3],
          ['us-wi', 4],
          ['us-me', 5],
          ['us-mi', 6],
          ['us-nv', 7],
          ['us-nm', 8],
          ['us-co', 9],
          ['us-wy', 10],
          ['us-ks', 11],
          ['us-ne', 12],
          ['us-ok', 13],
          ['us-mo', 14],
          ['us-il', 15],
          ['us-in', 16],
          ['us-vt', 17],
          ['us-ar', 18],
          ['us-tx', 19],
          ['us-ri', 20],
          ['us-al', 21],
          ['us-ms', 22],
          ['us-nc', 23],
          ['us-va', 24],
          ['us-ia', 25],
          ['us-md', 26],
          ['us-de', 27],
          ['us-pa', 28],
          ['us-nj', 29],
          ['us-ny', 30],
          ['us-id', 31],
          ['us-sd', 32],
          ['us-ct', 33],
          ['us-nh', 34],
          ['us-ky', 35],
          ['us-oh', 36],
          ['us-tn', 37],
          ['us-wv', 38],
          ['us-dc', 39],
          ['us-la', 40],
          ['us-fl', 41],
          ['us-ga', 42],
          ['us-sc', 43],
          ['us-mn', 44],
          ['us-mt', 45],
          ['us-nd', 46],
          ['us-az', 47],
          ['us-ut', 48],
          ['us-hi', 49],
          ['us-ak', 50],
          ['undefined', 51]
        ]
      }]
    };
    this.chart = Highcharts.mapChart('statechart', this.chartOptions);

  }

 Import Required HighchartsChartModule in module 

 import { HighchartsChartModule } from 'highcharts-angular';

输出喜欢

  [![enter image description here][1]][1]